Nav는 스크롤 할 때 크기를 변경하지 않습니다

Question

그래서 사용자가 스크롤하기 시작할 때이 jquery 코드가 내비게이션 크기를 변경하도록했습니다. 당신의 해결책이있는 경우 http://codepen.io/DerekDev/pen/Bydgpz

그래서, 그것은 크게 감상 할 수있다 : 여기

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

모든 코드입니다 ...하지만, 작동하는 표시되지 않습니다. 감사합니다 :)

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

을 첫째로, 당신은 body

이 두 번째로, 당신이 싶지는 window scrollTop을 확인하려면 .nav 요소가 아닌 UL의 높이를 변경하고 주문이 섞여있는 것 같으면 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