javascript - ヘッダーをスクロールした後に DIV ナビゲーションが表示される

Question

ヘッダーをスクロールした後に固定ナビゲーションが表示されるサイトを設計しています。

このスクリプトを使用してこれを機能させました：

$(window).load(function(){
// Get the headers position from the top of the page, plus its own height
var startY = $('#header').position().top + $('#header').outerHeight();

$(window).scroll(function(){
    checkY();
 });

function checkY(){
    if( $(window).scrollTop() > startY ){
        $('#navbar').slideDown();
    }else{
        $('#navbar').slideUp();
    }
}

 // Do this on load just in case the user starts half way down the page
 checkY();
 });//]]>  

問題は、スクリプトが読み込み時にヘッダーの高さを読み取ることですが、ヘッダーの高さがビューポートの 100% であるため、ウィンドウのサイズを変更すると、ナビゲーションが遅すぎるか早すぎるように表示されます。

たとえば、高さ 670 ピクセルのビューポートでページをロードし、サイズを 400 ピクセルのビューポートに縮小します。te nav が 670px の後にしか表示されないにもかかわらず、ヘッダーが 400px の高さまで縮小します

これを修正する方法はありますか？ありがとう