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

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

1 个答案: