JavaScript中fxScrollTop函数仅执行最后一次调用的问题求助

核心问题 #

你的代码存在三个关键问题，导致只有最后一次调用生效：

1. 滚动事件被覆盖：每次调用fxScrollTop时，直接给window.onscroll赋值新函数，后面的函数会完全覆盖前面的逻辑，最终只有最后一次的回调执行。
2. 元素处理不完整：遍历elementAll时，反复将elm赋值为当前元素，最后仅保留了最后一个元素，前面选中的元素根本没被处理。
3. 变量作用域污染：用var声明的pixels、newclass、elm属于函数级作用域，后续调用会覆盖之前的值，导致逻辑混乱。

修复后的代码 #

function bib(selector) {
    let elementAll;
    if (typeof selector !== 'object') {
        elementAll = document.querySelectorAll(selector);
    } else {
        // 支持直接传入DOM元素或元素集合
        elementAll = Array.isArray(selector) ? selector : [selector];
    }

    return {
        fxScrollTop: (props) => {
            // 直接解构参数，简化逻辑
            const { pixels = 0, class: newClass } = props;
            if (!newClass) return; // 无类名参数直接退出

            // 用addEventListener绑定滚动事件，避免覆盖
            window.addEventListener('scroll', () => {
                const pixelsFromTop = window.pageYOffset;
                // 遍历所有选中元素，逐个处理类名切换
                elementAll.forEach(elm => {
                    if (pixelsFromTop > pixels) {
                        elm.classList.add(newClass);
                    } else {
                        elm.classList.remove(newClass);
                    }
                });
            }, { passive: true }); // passive参数优化滚动性能
        }
    };
}

关键改进点 #

• 滚动事件共存：使用addEventListener替代直接赋值window.onscroll，多个调用的回调会同时生效，不会互相覆盖。
• 全元素处理：用forEach遍历elementAll中的每一个元素，不再只处理最后一个。
• 作用域优化：用const/let声明变量，避免变量提升导致的作用域污染。
• 参数简化：通过解构直接获取需要的参数，代码更简洁，还能设置默认值。
• 性能优化：添加passive: true参数，减少滚动时的浏览器阻塞。
• 参数校验：没有传入class时直接退出，避免无效操作。

调用方式保持不变 #

你的两次调用代码无需修改，直接使用即可：

bib('.header').fxScrollTop({
    pixels: 25,
    class: 'fixed',
});

bib('.content').fxScrollTop({
    pixels: 25,
    class: 'fixedHeader',
});

可选优化：防抖处理 #

如果滚动时页面性能有问题，可以给滚动事件添加防抖，减少回调执行频率：

function debounce(func, delay = 100) {
    let timer;
    return (...args) => {
        clearTimeout(timer);
        timer = setTimeout(() => func.apply(this, args), delay);
    };
}

// 在fxScrollTop中修改滚动事件绑定：
window.addEventListener('scroll', debounce(() => {
    const pixelsFromTop = window.pageYOffset;
    elementAll.forEach(elm => {
        if (pixelsFromTop > pixels) {
            elm.classList.add(newClass);
        } else {
            elm.classList.remove(newClass);
        }
    });
}), { passive: true });

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