jQuery-固定导航菜单，可根据滚动条调整高度

我是jQuery的新手，几天来我一直在尝试在我的页面中创建一个顶部固定的导航菜单，根据滚动条的不同高度，但到目前为止，我一直很难弄清楚它是如何工作的。我试图用CSS转换来模拟效果，但这不是我想要的

这里有一个完美的例子，说明我正在努力实现的目标：www.bulo.com 在这里：

我检查了Bulo.com的代码，发现它真的很难理解，因为很明显，它是在jQuery.js中工作的，它被压缩了，没有空格或换行符，这让我发疯了

我把我认为重要的东西都删去了：

HTML:

不打算发布jquery.js文件，因为它非常庞大，但您可以通过Firebug或Safari中的Inspect元素轻松查看它

那么，有人能给我解释一下吗

---

提前感谢。

您只需在页面70px向下滚动时向导航栏添加一个class

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

---

当页面70px向下滚动时，您只需在导航栏中添加一个class

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

---

恐怕我没有清楚地解释我想要实现的目标。这里：当页面向下滚动时，我为您编写的代码可以添加一个固定到.navigation对象的类mod头。很明显，你可以用它在基本的CSS菜单属性上进行其他操作。再次你好，伊利亚，谢谢你的回复。好的，它可以工作，但我仍然不知道如何做动画部分…@Adonai，刚刚更新了我的答案，让你在滚动时更改菜单高度。@Illia，它可以工作，但这不是我想要做的。当页面滚动X像素时，代码只会触发动画。我需要的是，如果我的导航菜单是200px，用户只滚动10像素，导航菜单栏将是190px，如果他滚动37px，那么导航栏将是163px的高度。。。滚动5000px，导航条的最小高度为50px。如果用户一直滚动到顶部，导航条将返回其原始状态200px。对不起，如果我不够清楚，我的英语不是很好。。。再次感谢你对我的学习如此有帮助。恐怕我没有清楚地解释我想要达到的目标。这里：当页面向下滚动时，我为您编写的代码可以添加一个固定到.navigation对象的类mod头。很明显，你可以用它在基本的CSS菜单属性上进行其他操作。再次你好，伊利亚，谢谢你的回复。好的，它可以工作，但我仍然不知道如何做动画部分…@Adonai，刚刚更新了我的答案，让你在滚动时更改菜单高度。@Illia，它可以工作，但这不是我想要做的。当页面滚动X像素时，代码只会触发动画。我需要的是，如果我的导航菜单是200px，用户只滚动10像素，导航菜单栏将是190px，如果他滚动37px，那么导航栏将是163px的高度。。。滚动5000px，导航条的最小高度为50px。如果用户一直滚动到顶部，导航条将返回其原始状态200px。对不起，如果我不够清楚，我的英语不是很好。。。再次感谢你对我学习的帮助。

$(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");
         }
    });
});

$(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 );
         }
     });
 });