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

当您滚动时，我正在创建固定的导航。

我已经使它工作了，但是我对为什么我的第一个版本不能正常工作感到困惑。它在下降的过程中起作用，但在上升的过程中仍停留在窗口顶部。

版本1（无法正常运行）

https://jsfiddle.net/9dqabdj5/2/

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

最佳答案

在版本1中，offsetTop变为0，并在菜单向下固定后保持为0。因此，if(window.scrollY >= nav.offsetTop)总是有效地出现在true上，并将fixed-top连续保留在nav元素上。

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

尝试在console.log(nav.offsetTop)中添加navOffsetTop()并在不同的滚动距离下查看offsetTop值。

希望有帮助！