Question

滚动时我正在创建固定导航。

我已经开始工作，但我很困惑为什么我的第一个版本无法正常工作。它可以在向下的路上工作，但是在向上的方向上仍然会停留在窗口顶部。

版本1（无法正常工作）

// Get nav
var nav = document.querySelector('nav');

function navOffsetTop() {
    if(window.scrollY >= nav.offsetTop) {
        document.body.style.paddingTop = nav.offsetHeight + 'px';
        document.body.classList.add('fixed-top');
    } else {
        document.body.style.paddingTop = 0;
        document.body.classList.remove('fixed-top');
    }
}

window.addEventListener('scroll', navOffsetTop);

版本2（工作） - 唯一的区别是'offset.Top'在变量中。

https://jsfiddle.net/9kdy0s9n/

// Get nav
var nav = document.querySelector('nav');
var navTop = nav.offsetTop;

function navOffsetTop() {
    if(window.scrollY >= navTop) {
        document.body.style.paddingTop = nav.offsetHeight + 'px';
        document.body.classList.add('fixed-top');
    } else {
        document.body.style.paddingTop = 0;
        document.body.classList.remove('fixed-top');
    }
}

window.addEventListener('scroll', navOffsetTop);

Answer 1

在版本1 offsetTop变为0并在菜单修复后保持为0。所以if(window.scrollY >= nav.offsetTop)实际上始终会true fixed-top，并且nav元素会持续navTop。

在版本2 中，else被评估一次（从jsfiddle中的~195px开始）并在整个生命周期中保持该值。这允许window.scrollY执行，因为当navTop向后滚动到足够高时，console.log(nav.offsetTop)最终可能会小于navOffsetTop()。

尝试在offsetTop中添加{{1}}并查看不同滚动距离的{{1}}值。

希望这有帮助！

Javascript固定导航滚动 - 这有什么区别？

1 个答案: