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示例