如何将jQuery的$(document).scrollTop()转换为原生JS实现导航栏淡入

核心实现解答 #

你要替换的$(document).scrollTop()滚动距离获取逻辑，原生JS直接使用window.scrollY即可，这是现代浏览器通用的获取文档纵向滚动像素值的全局属性，无需额外依赖。
如果需要兼容IE等老旧浏览器，可以使用兼容写法：

const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;

原JS代码问题修正 #

你当前的JS代码存在重复绑定滚动事件的问题：在滚动事件回调中又新增了滚动事件监听，会导致函数被重复触发，造成严重性能损耗。另外绑定事件时直接写fireHeader()会立刻执行函数，无法实现滚动时触发的效果，需要传入函数引用。

修正后的完整JS代码 #

// DOM查询提前到全局执行，避免每次滚动都重复查询DOM，提升性能
const navBarFade = document.querySelector(".child-container-bg");
const brkPoint  = 400;
const fadeLength = 300;

const fireHeader = function (noAnimate) {
    // 原生JS替换jQuery滚动距离获取的核心代码
    const scrollTop  = window.scrollY;
    let opacity;
    if (scrollTop < brkPoint) {
        opacity = 0;
    } else if (scrollTop > brkPoint + fadeLength) {
        opacity = 1;
    } else {
        opacity = noAnimate ? 1 : (scrollTop - brkPoint) / fadeLength;
    }
    navBarFade.style.opacity = opacity;
};

// 页面加载完成先执行一次，避免刷新后滚动位置对应导航栏透明度异常
fireHeader(true);
// 绑定滚动事件，直接传入函数引用即可
window.addEventListener('scroll', fireHeader);

内容的提问来源于stack exchange，提问作者Antonio Developer