Javascript 导航在滚动时不会改变大小

所以我找到了这个jquery代码，当用户开始滚动时，我的导航会改变它的大小。不过，它似乎不起作用

$(function(){
    $('.nav').data('size','big');
});

$(window).scroll(function(){
    var $nav = $('.nav');
    if ($('body').scrollTop() > 0) {
        if ($nav.data('size') == 'big') {
            $nav.data('size','small').stop().animate({
                height:'60px'
            }, 600);
        }
    } else {
        if ($nav.data('size') == 'small') {
            $nav.data('size','big').stop().animate({
                height:'40px'
            }, 600);
        }  
    }

以下是所有代码：

因此，如果你们中有人有一个解决方案，我们将不胜感激。谢谢：

试试这个：

$(function() {
    $(window).scroll(function() {    
    var nav = $('.nav');
    if ($(window).scrollTop() >= 0) {
      if(!nav.hasClass("smallNav")) {
        nav.hide();
        nav.removeClass('bigNav').addClass("smallNav").fadeIn( "slow");
      }
    } else {
      if(!nav.hasClass("bigNav")) {
        nav.hide();
        nav.removeClass("sml-logo").addClass('bigNav').fadeIn( "slow");
      }
    }

  });
});

和CSS规则：

.bigNav{
height:60px;
}
.smallNav{
height:40px;
}

---

首先，您要检查窗口滚动条，而不是主体

其次，你想改变UL的高度，而不是.nav元素，而且你似乎把顺序搞混了，你可能想要40px的小尺寸，60px的大尺寸

$(window).scroll(function(){
    var $nav = $('.nav');
    if ($(window).scrollTop() > 0) {
      console.log($nav.data('size'))
        if ($nav.data('size') == 'big') {
            $nav.data('size','small').find('ul').stop().animate({
                height:'40px'
            }, 600);
        }
    } else {
        if ($nav.data('size') == 'small') {
            $nav.data('size','big').find('ul').stop().animate({
                height:'60px'
            }, 600);
        }  
    }
});