ページの更新後にナビゲーション位置が正しくない

Question

ページの上部に来ると、カスタム作成クラスを「スティッキー」にするスティッキーナビゲーションがあります。

これまでのところうまくいきますが、ページを更新すると、スクロールした直後にナビゲーションの位置が誤って検出され、スティッキーに配置されます。

私は、コードのこれらの関連する行います

var navigation = document.getElementById('navigation'), 
    rect = navigation.getBoundingClientRect(); 
var navigationPosition = rect.top - (window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0); 

if (navigationPosition <= 0) { 
     if (!navigation.classList.contains('sticky')) { 
      navigation.classList.add('sticky'); 
     } 
    } else { 
     if (navigation.classList.contains('sticky')) { 
      navigation.classList.remove('sticky'); 
     } 
    } 

私はあなたが私を助けることを願って、私が間違って何をやっていますか？ ありがとうございます！

jqueryを使用しない方法は非常に評価されますが、jQueryは必要に応じてこの作業を行う必要があります。

Answer 1

このコードがお役に立てば幸いです。

var navigation = document.getElementById('navigation'), 
    navigationHeight = navigation.offsetHeight;// or you can set static value 



function init() { 

    window.addEventListener('scroll', slickNavigation); 

    slickNavigation(); 
} 


function slickNavigation() { 
    var scrolled = window.pageYOffset || document.documentElement.scrollTop; 


    if (scrolled >= navigationHeight) { 
      navigation.classList.add('sticky'); 

    } else { 
      navigation.classList.remove('sticky'); 
    } 
} 

init();