jQuery-固定的导航菜单，其高度根据滚动而变化

Question

我是jQuery的新手，已经有几天我试图在页面中制作一个顶部固定的导航菜单，其高度根据滚动条而变化，但是到目前为止，要弄清楚如何做到这一点一直很困难。作品。 我设法仅用CSS Transition来模拟效果，但这不是我想要的。

这是我要完成的工作的完美范例：www.bulo.com，然后在这里： http ：//d.pr/i/fqaB

我检查了Bulo.com的代码，发现它真的很难理解，因为显然可以使它全部工作的部分都在jQuery.js内，并且都被压缩而没有空格或换行符，这使我成为香蕉。

我删除了我认为重要的内容：

HTML：

<header class="mod-header" data-target-padding="40">
  <div class="container">
    <nav class="navigation">
      <ul>
          <li class="nav-item">
            <a href="collections.html">Collections</a>
          </li>
          <li class="nav-item">
            <a href="products.html">Products</a>
          </li>
          <li class="nav-item">
            <a href="for-sale.html">For sale</a>
          </li>
      </ul>
    </nav>
  </div>
</header>

CSS：

.mod-header {
background-color: #FFFFFF;
border-bottom: 1px solid #DDDDDD;
z-index: 901;
}
.mod-header .navigation {
text-align: center;
}
.mod-header .navigation ul {
display: inline-block;
margin: 0;
overflow: visible;
padding: 0;
text-align: center;
}
.mod-header .navigation li {
display: block;
float: left;
height: 18px;
margin: 0;
overflow: visible;
padding: 64px 0;
position: relative;
z-index: 910;
}
.mod-header .navigation li a {
color: #171617;
display: inline-block;
font-family: 'Droid Sans',sans-serif;
font-size: 18px;
height: 18px;
margin: 0 20px;
text-align: center;
text-decoration: none;
}
.mod-header.mod-header-fixed {
left: 0;
margin: 0;
position: fixed;
top: 0;
width: 100%;
}

不会发布jquery.js文件，因为它异常庞大，但是您可以通过Safari中的Firebug或Inspect Element轻松地自己查看它。

那么，有人可以向我解释吗？

提前致谢。

Answer 1

您只需要在页面向下滚动70px时向该导航栏添加mod-header-fixed类，然后在页面向后滚动时将其删除。

以下jQuery示例将轻松捕获此类事件并执行您想要的操作：

$(document).ready(function(){
     $(window).scroll(function(){
         if ($(window).scrollTop() > 70){
            $(".navigation").addClass("mod-header-fixed");
         } else if ($(window).scrollTop() < 70) {
            $(".navigation").removeClass("mod-header-fixed");
         }
    });
});

jsFiddle示例

阅读jQuery API Documentation上有关.scrollTop()方法的更多信息。

编辑1：

您说您无法阅读压缩代码？ 请，只需将您无法阅读的代码复制/粘贴到JavaScript Beautifier中，并获得易于阅读的版本！

编辑2：

如果希望对象更改.height() ，则可以使用.animate()方法来处理padding属性：

$(document).ready(function(){
     $(window).scroll(function(){
         if ($(window).scrollTop() > 70){
             $(".navigation").addClass("mod-header-fixed");
             $(".mod-header .navigation li").stop().animate({ 
                padding: "45px 0"
             }, 600 );
             $(".mod-header .navigation li").stop().animate({ 
                padding: "45px 0"
             }, 600 );
         } else if ($(window).scrollTop() < 70) {
             $(".navigation").removeClass("mod-header-fixed");
             $(".mod-header .navigation li").stop().animate({ 
                padding: "15px 0"
             }, 600 );
             $(".mod-header .navigation li").stop().animate({ 
                padding: "15px 0"
             }, 600 );
         }
     });
 });

jsFiddle示例