요소 아래쪽으로 스크롤 할 때 이벤트가 트리거됩니까?

Question

그래서 내 웹 사이트에는 사이트 상단에 정적 헤더가 있습니다. 뷰포트 상단에 고정되어 있지 않습니다. 그러나 사용자가 일단이 div의 맨 아래를 스크롤하면 고정 된 navbar가 나타납니다. 내 코드는 거의 작동하지만 페이지의 맨 위에있는 div의 상단 오프셋에서만 트리거합니다. 여기에 내 코드입니다 :

$("#header-2").hide(); // hide the fixed navbar initially 

var topofDiv = $("#header-container").offset().top; //gets offset of header 
$(window).scroll(function(){ 
    if($(window).scrollTop() > topofDiv){ 
     $("#header-2").show(); 
    } 
    else{ 
     $("#header-2").hide(); 
    } 
}); 

가 다시 말하지만, 나는 #header-container의 바닥을지나 사용자가 스크롤 한 번 고정 된 네비게이션 바을 보여주는 트리거 할 필요가 그것을 좋아하지 상단 지금 않습니다. 도움?

Answer 1

난 당신이 가기 DIV의 높이를 추가 오프셋 (offset)를 가지는 경우에 당신은 당신이의 오프셋에

$("#header-2").hide(); // hide the fixed navbar initially 

var topofDiv = $("#header-container").offset().top; //gets offset of header 
var height = $("#header-container").outerHeight(); //gets height of header 

$(window).scroll(function(){ 
    if($(window).scrollTop() > (topofDiv + height)){ 
     $("#header-2").show(); 
    } 
    else{ 
     $("#header-2").hide(); 
    } 
});