ページリロード後にナビバー状態をリセットする

Question

ページがリフレッシュされることについてのかなり基本的な質問（と思います）。

私は、サイズを変更して色を変更し、下にスクロールするとあらゆる種類の幻想的なことを行う固定のナビゲーションバーを持っています。問題は、ページをリフレッシュすると、ナビゲーションバーがまだスクロールされていても、ページの上部にあった場合と同じように表示されます。私は、問題は、この関数は唯一のスクロールでトリガされると思い

$(window).scroll(function() { 
    if ($(document).scrollTop() > 50) { 
     $('nav').addClass('shrink'); 
     $('#enquire-btn').addClass('btn-shrink'); 
     $('#logo').css("max-height", "70px") 
     $('#logo-link').css("padding-top", "7px") 
    } else { 
     $('nav').removeClass('shrink'); 
     $('#enquire-btn').removeClass('btn-shrink'); 
     $('#logo').css("max-height", "100px") 
     $('#logo-link').css("padding-top", "15px") 
    } 
}); 

Answer 1

私の最初の提案は、$（window）.load（）イベントを聴いて、スクロールトップに基づいて状態を再計算することです。

ブラウザのスクロール後リフレッシュの実装によっては、タイムアウトを追加する必要があります。

別のオプションは、それがリロードした後、再びスクロールしないように、リフレッシュする前に、右上に文書をスクロールするようになります：

$(window).on('beforeunload', function() { 
    $(window).scrollTop(0); 
}); 

Answer 2

を：jQueryの2.xのを使用して

は、ここで私が持っているものです。ページをリロードすると、関数が呼び出されたことはありません。

$(window).scroll(ScrollChange); 
function ScrollChange(){ 
if ($(document).scrollTop() > 50) { 
     $('nav').addClass('shrink'); 
     $('#enquire-btn').addClass('btn-shrink'); 
     $('#logo').css("max-height", "70px") 
     $('#logo-link').css("padding-top", "7px") 
    } else { 
     $('nav').removeClass('shrink'); 
     $('#enquire-btn').removeClass('btn-shrink'); 
     $('#logo').css("max-height", "100px") 
     $('#logo-link').css("padding-top", "15px") 
    } 
} 

$(document).ready(function() { 
    ScrollChange(); 
} 

このようにして、ページの読み込み時にも機能が起動されます。