위로 스크롤 할 때 메뉴 숨기기

Question

사용자가 아래로 스크롤 할 때 내 메뉴 (탐색)를 숨기고 스크롤 할 때 다시 가져 오는 다음 스크립트 (스 니펫에 있음)가 있습니다.

그러나 그것은 작동하지 않으며 문제가 자리하고있는 곳 모르겠습니다

var didScroll; 
 
var lastScrollTop = 0; 
 
var delta = 5; 
 
var navbarHeight = $('nav').outerHeight(); 
 

 
$(window).scroll(function(event){ 
 
    didScroll = true; 
 
}); 
 

 
setInterval(function() { 
 
    if (didScroll) { 
 
     hasScrolled(); 
 
     didScroll = false; 
 
    } 
 
}, 250); 
 

 
function hasScrolled() { 
 
    var st = $(this).scrollTop(); 
 
    
 
    if(Math.abs(lastScrollTop - st) <= delta) 
 
     return; 
 
    
 
    if (st > lastScrollTop && st > navbarHeight){ 
 
     // Scroll Down 
 
     $('nav').removeClass('nav-down').addClass('nav-up'); 
 
    } else { 
 
     // Scroll Up 
 
     if(st + $(window).height() < $(document).height()) { 
 
      $('nav').removeClass('nav-up').addClass('nav-down'); 
 
     }}  
 
    lastScrollTop = st; 
 
}

.nav-up { top: -100px; } 
 

 
#s-nav { 
 
\t position: fixed; 
 
\t z-index: 999; 
 
\t top: 0; 
 
\t width: 100%; height: 100px; 
 
\t padding-top: 25px; 
 
    background-color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<nav id="s-nav" class="nav-down"> 
 
    <p>navigation</p> 
 
</nav>

Answer 1

그것은이다 id is more specify than class 이유는

당신은 스스로 그것을 찾아 디버거를 사용할 수 있습니다 :

jQuery(function($) { 
 
    var didScroll; 
 
    var lastScrollTop = 0; 
 
    var delta = 5; 
 
    var navbarHeight = $('nav').outerHeight(); 
 

 
    $(window).scroll(function(event) { 
 
    didScroll = true; 
 
    }); 
 

 
    setInterval(function() { 
 
    if (didScroll) { 
 
     hasScrolled(); 
 
     didScroll = false; 
 
    } 
 
    }, 250); 
 

 
    function hasScrolled() { 
 
    var st = $(this).scrollTop(); 
 
    if (Math.abs(lastScrollTop - st) <= delta) 
 
     return; 
 

 
    if (st > lastScrollTop && st > navbarHeight) { 
 
     // Scroll Down 
 
     $('nav').removeClass('nav-down').addClass('nav-up'); 
 
    } else { 
 
     // Scroll Up 
 
     if (st + $(window).height() < $(document).height()) { 
 
     $('nav').removeClass('nav-up').addClass('nav-down'); 
 
     } 
 
    } 
 
    lastScrollTop = st; 
 
    } 
 
});

#s-nav.nav-up { 
 
    top: -100px; 
 
} 
 
#s-nav { 
 
    position: fixed; 
 
    top: 0; 
 
    width: 100%; 
 
    height: 100px; 
 
    padding-top: 25px; 
 
    transition: top 0.3s; 
 
} 
 
.content { 
 
    height: 2000px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<nav id="s-nav" class="nav-down"> 
 
    ... nav content ... 
 
</nav> 
 
<div class='content'> 
 
    content 
 
</div>