A menu that is fixed below the viewport and scrolls once in viewport?

I have no idea how to describe this, so the best thing is to link an example: http://ift.tt/1bNOMI8

Whatever this guy did with that sidebar menu is great and I would love to replicate it. I have tried inspect, but I cannot pinpoint how it works. It seems to me that the menu behaves as if it was fixed in css, but it only becomes visible once scrolling down the viewport... but there is no fade in or other jQuery tricks that I can see. Does anybody have ideas? Here is what I have so far. HTML:

<ul class="nav">
<li><a href="#">Profile</a></li>
<li><a href="#">Experience</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">Contact</a></li>
</ul>

CSS:

.nav
{
    position: fixed;
    display: inline-block;
    font-family: "verdana";
    text-align: left;
    z-index: 3;
    right: 30px;
    top: 200px;
}

.nav a
{
    display: inline-block;
    padding: 20px;
    text-decoration: none;
    color: #ededed;
}

.nav a:hover
{
    color: #000000;
}

Also, I am SO lost as to why the .nav still has dots beside the links, even though I have specified none for the text-decoration rule and it worked for the underlining...