Nav не изменит размер при прокрутке

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

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