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

Question

所以我发现这个 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);
        }  
    }

所有代码如下: http://codepen.io/DerekDev/pen/Bydgpz

因此，如果你们中的任何人有解决方案，我们将不胜感激。谢谢 :)

Answer 1

试试这个:

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