Question

所以我发现这个jquery代码使我的nav在用户开始滚动时改变它的大小。尽管如此......它似乎并没有起作用。

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

Answer 2

首先，您要检查window scrollTop，而不是body

其次，您想要更改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);
        }  
    }
});

PEN

滚动时导航不会改变大小

2 个答案: