固定在視口下方並在視口中滾動一次的菜單？

Question

我不知道如何來形容這一點，所以最好的辦法是鏈接一個例子：http://www.pascalvangemert.nl/#/profile

不管這傢伙確實與工具欄菜單是偉大的，我很願意複製它。我試過檢查，但我無法確定它是如何工作的。在我看來，菜單的行爲就像在css中修復一樣，但是隻有在向下滾動視口時才能看到它......但是沒有淡入或我可以看到的其他jQuery技巧。有人有想法嗎？這是我到目前爲止。 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; 
} 

而且，我很迷失，爲什麼.nav仍然有鏈接的旁邊點，即使我已經指定沒有爲文本的裝飾規則和它的工作強調...

Answer 1

你可以我們Bootstrap爲此附加 - 很簡單。

<div data-spy="affix" data-offset-top="60" data-offset-bottom="200"> 
    ... 
</div> 

編輯：我的意思是第一次貼 - 道歉的朋友。在光明的一面，它更容易使用Affix。