如何滾動時堅持一個div /導航欄的窗口頂部的過去，

Question

我有一個菜單導航欄，一個頭之後是

<header> 
<center> 
<img src=""> Some other stuff 
</center> 
</header> 

<div class="navbar"> 
<div class="nav"> 
<ul class="meniunav"> 
<li><a href=""><img src="home.svg" class="navicon"> Home</a></li> 
<li><a href=""><img src="info.svg" class="navicon"> Info</a></li> 
<li><a href=""><img src="contact.svg" class="navicon"> Contact</a></li> 
</ul> 
</div> 
</div> 

頭具有150像素的高度，我想使如果它到達那裏，navbar元素將粘貼到頁面的頂部。更清楚的是：當我向下滾動時，我希望該元素在到達頂點時固定在頂部，並且如果向後滾動並且它達到初始位置以移除固定位置。我怎樣才能做到這一點？

Answer 1

你有兩種方式來做到這一點：

第一：使用position: sticky;只在Firefox上工作（我們將不得不等待，很多時候這個進來標準）

二（每道瀏覽器）：javascript。 互聯網上有很多腳本，你可以很容易地找到它們。只需在Google中輸入「粘滯導航」即可。 下面是示例的那樣：https://codepen.io/Guilh/pen/JLKbn

Answer 2

好的所以顯然是最簡單的方法是：

$(window).scroll(function() { 
    if($(this).scrollTop() >= 150) { 
    $(".navbar").addClass("sticky"); 
    } 
    else { 
    $(".navbar").removeClass("sticky"); 
    } 
}); 

與含有粘類：

.sticky { 
position: fixed; 
top: 0; 
}