从顶部滚动 100 像素时设置导航栏样式答案

【问题标题】：Style your navigation bar when scrolled 100px from top从顶部滚动 100 像素时设置导航栏样式
【发布时间】：2014-10-18 07:25:41
【问题描述】：

嗨，

如果你看看这个页面 > http://www.wikihow.com/
您会注意到向下滚动时导航栏的高度会变小。我想使用 jQuery 将它应用到我的导航栏。我在谷歌上找到了解决方案，但人们说你需要一些插件。我认为这不是真的，对吗？

谢谢。

【问题讨论】：

如果您已经使用 jQuery，这应该可以在没有任何其他插件的情况下进行管理
正确，你可以在没有插件的情况下做到这一点。 .scrol() 和 .scrollTop() 的组合应该是一个很好的提示，可以帮助您入门。
谢谢马克，这就是我要找的东西

标签： jquery navigation height navbar

【解决方案1】：

在这篇文章中查看我的评论，可能有用：Jquery if $(window) scroll down function

为了让导航栏的 div 在滚动时保持在顶部，您应该定义它

position: fixed;

【讨论】：

【解决方案2】：

代码如下：

$(document).scroll(function(){
   var scroll = 0;

   if (typeof window.pageYOffset !== 'undefined' ) {
      scroll = window.pageYOffset;
   }

   var d = document.documentElement;
   if (d.clientHeight) {
       scroll = d.scrollTop;
   }
   scroll = document.body.scrollTop;

   if (scroll > 100) {
      // scroll greater than 100px, decrease navigation bar height
   }else{
      // scroll less than 100px,  increase navigation bar height
   }
});

另外，你需要让导航栏position:fixed

就是这样。

【讨论】：