javascript - 页面刷新后导航位置不正确

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();