스크롤 기능으로 헤더 숨기기/보이기

Question

커뮤니티 :). 사용자가 아래로 스크롤 한 (헤더 숨기기) 또는 위로 (헤더 표시)에 따라 헤더 DIV를 숨기거나 표시하려고합니다. http://codepen.io/AdobeWordPress/pen/tigrx

지금까지 가장 가까운 내가 다음 코드와 함께 얻을 수있었습니다 : 나는 기본적으로이 결과를 달성하기 위해 노력하고있어

var scroll_pos = 0; 
var scroll_time; 

$(window).scroll(function() { 
    clearTimeout(scroll_time); 
    var current_scroll = $(window).scrollTop(); 

    if (current_scroll >= 0) { 
     if (current_scroll <= scroll_pos) { 
      $('.cs_mega_menu').slideDown('230'); 
     } 
     else { 
      $('.cs_mega_menu').slideUp('230'); 
     } 
    } 

    scroll_time = setTimeout(function() { 
     scroll_pos = $(window).scrollTop(); 
    }, 100); 
}); 

그러나이 문제는 효과가 있다는 것입니다 정확하지 않으며 (매번 올바르게 반응하지 않음) 애니메이션이 유동적이지 않습니다.

codepen 예제의 코드를 사용하려고 할 때 내 웹 사이트가 공백이됩니다. /. 내 웹 사이트에서 유용하게 사용할 수 있도록 도와 주시면 감사하겠습니다.

Answer 1

확인이 : http://imakewebthings.com/jquery-waypoints/

예 :

$('#element_after_header').waypoint(function(direction){ 
    if(direction=='up'){ 
     $('header').show(); 
    }else{ 
     $('header').hide(); 
    } 
} 

Answer 2

타이머는 효과를 달성하기 위해 필요하지 않습니다. 이것을 시도해 볼 수 있습니다 ...

$(window).scroll(function() { 
    var header_height = 200; 
    var current_scroll = $(window).scrollTop(); 

    if (current_scroll > header_height) { 
      $('.cs_mega_menu').slideUp(1000); 
    } 
    else{ 
      $('.cs_mega_menu').slideDown(1000); 
    } 
}); 

Answer 3

고맙습니다. 나는 내가 찾던 않습니다 정확히 여기에 유래의 코드를 발견했습니다

$(function(){ 
    var lastScrollTop = 0, delta = 5; 
    $(window).scroll(function(event){ 
     var st = $(this).scrollTop(); 
     if(Math.abs(lastScrollTop - st) <= delta) 
      return; 
     if (st > lastScrollTop){ 
      // downscroll code 
      $('.cs_mega_menu').slideUp('230'); 
     } else { 
      // upscroll code 
      $('.cs_mega_menu').slideDown('230'); 
     } 
     lastScrollTop = st; 
    }); 
}); 

가 지금은 그냥 가져가에 나타납니다 만들기와 사투를 벌인거야,하지만 그건 다른 이야기입니다.