要素の下をスクロールするとイベントがトリガされますか？

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の下を過ぎてユーザーがスクロール一度固定されたナビゲーションバーを示すトリガする必要がある、それのようではないトップは現在ありません。助けて？私はあなたがトップにdiv要素の高さを追加した場合だと思い

Answer 1

はあなたが

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