从顶部滚动100px时设置导航栏的样式

Question

您好，

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

感谢。

Answer 1

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

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

position: fixed;

Answer 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
   }
});

此外，您需要设置导航栏位置：已修复

那就是它。