导航不会在滚动时更改大小

Question

So I found this jquery code to make my nav change its size when a user begins to scroll. It doesn't appear to be working, though...

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

Here is all the code: http://codepen.io/DerekDev/pen/Bydgpz

So if any of you have a solution, it would be greatly appreciated. Thanks :)

Answer 1

try this:

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

  });
});

and CSS rules:

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

Answer 2

Firstly, you want to check the window scrollTop, not the body

Secondly, you want to change the height of the UL, not the .nav element, and you seem to have the order mixed up, you probably want 40px when it's small, and 60px when it's big !

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