1

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

这是我想要完成的完美示例：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 轻松查看它。

那么，谁能给我解释一下？

提前致谢。

4

1 回答 1

1

您只需要在页面向下滚动70pxmod-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 文档.scrollTop()的方法。

编辑1：

你说你看不懂压缩代码？拜托，只需将您无法读取的代码复制/粘贴到JavaScript Beautifier并获得它的易读版本！

编辑2：

如果您希望对象更改.height()，您可以使用以下方法操作填充属性.animate()：

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

于 2013-10-29T18:33:22.597 回答