如何让同一JS滚动函数作用于不同类元素且不覆盖原有功能？

原代码的问题 #

你之前的代码存在几个影响复用的问题：

• 同时用了jQuery的$(document).scroll()和原生的window.addEventListener("scroll")，重复绑定滚动事件会导致逻辑混乱、性能浪费
• 变量myID未声明，属于全局变量，复制代码后会被新元素覆盖，最终只有最后一个元素生效
• 直接替换className会覆盖元素原有其他类，硬写类名的方式也不够灵活

优化后的通用复用方案 #

把逻辑封装成可调用的函数，传入元素选择器和滚动触发阈值，就能给任意元素实现相同效果：

// 通用滚动切换类函数
function toggleClassOnScroll(elementSelector, scrollThreshold) {
  const element = document.querySelector(elementSelector);
  if (!element) return; // 找不到元素直接退出，避免报错

  const handleScroll = () => {
    const scrollY = window.scrollY;
    if (scrollY >= scrollThreshold) {
      element.classList.add('show');
      element.classList.remove('hide');
    } else {
      element.classList.add('hide');
      element.classList.remove('show');
    }
  };

  // 绑定滚动监听
  window.addEventListener('scroll', handleScroll);
  // 页面加载时先执行一次，保证初始状态正确
  handleScroll();
}

// 调用示例：给不同元素设置不同触发条件
toggleClassOnScroll('#advertisement', 550); // 原广告元素，滚动550px触发
toggleClassOnScroll('#sidebar', 300);       // 侧边栏，滚动300px触发
toggleClassOnScroll('#back-to-top', 800);   // 返回顶部按钮，滚动800px触发

方案优势 #

• 一次封装，多次调用：只需传入不同的元素选择器和阈值，就能给任意元素添加滚动切换效果
• 用classList操作类名，不会覆盖元素原有的其他类（比如广告元素原本的advertisement类，只要HTML里已定义就会保留）
• 页面加载时自动执行一次逻辑，避免初始状态与滚动后状态不一致
• 每个元素的逻辑独立，不会互相干扰

注意事项 #

• 确保HTML中的元素已有hide或show的初始类，也可以在函数内默认设置初始状态
• 如果需要移除滚动监听，可以将handleScroll函数保存下来，后续用window.removeEventListener('scroll', handleScroll)执行移除操作

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