滚动到窗口上方时如何将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>

标头的高度为150px，如果要到达该页面，我想使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;
}