HTML -- 滚动到页面上的某个点后，如何使我的导航栏保持不变？答案

【问题标题】：HTML -- How can I make my navbar stick after scrolling to a certain point on page?HTML -- 滚动到页面上的某个点后，如何使我的导航栏保持不变？
【发布时间】：2014-10-22 16:10:07
【问题描述】：

滚动到页面上的某个点后，如何使导航栏保持不变？我不希望它在滚动过去后立即粘住，而是在我到达页面上的另一个 div 时粘住。

【问题讨论】：

div 是否必须完全在视口中？如果页面上有多个 div，它是只粘在最顶部/最底部的一个还是会出现在每个上？
导航栏将位于页面顶部。我希望用户能够滚动过去，直到向下滚动到特定的 div，然后我希望导航栏固定在页面顶部，直到向上滚动。这是一个例子：zozothemes.com/foody/foody2/index.html

标签： html navbar

【解决方案1】：

试试这个：

window.onscroll = function() {
  var scrollTop = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;
  if (scrollTop >= document.getElementById("d").offsetTop) {
    document.getElementById("nav").style.position = "fixed";
    document.getElementById("d").style.marginTop = "50px";
    document.getElementById("nav").style.marginTop = "-50px";
  } else {
    document.getElementById("nav").style.position = "static";
    document.getElementById("d").style.marginTop = "0px";
    document.getElementById("nav").style.marginTop = "0px";
  }
}

nav {
  width: 100%;
  height: 50px;
  background: red;
  z-index: 100;
}
body {
  margin: 0;
  min-height: 1000px
}
#d {
  position: relative;
  top: 100px;
  width: 100%;
  height: 50px;
  background: yellow;
}

<body>
  <nav id="nav"></nav>
  <div id="d"></div>
</body>

当您滚动到黄色 div 时，红色导航栏会粘在视口的顶部并一直停留在那里直到您向上滚动

【讨论】：

非常好的解决方案！ =)
我遇到了一个小问题。我正在为导航栏使用
标签。我如何引用该标签而不是 Id？