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 example

详细了解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 example

jQuery - 修复了根据滚动可变高度的导航菜单

1 个答案:

编辑1：

编辑2：