粘性导航与返回顶部功能单独可用但无法协同运行的问题咨询

两段脚本单独运行全部正常、同时加载就整体失效，是两个问题叠加导致的：

• window.onscroll 属于单值属性式的事件绑定，同一时间只能挂载一个回调函数。脚本加载时，后执行的赋值会完全覆盖前一个注册的滚动逻辑，两个脚本的处理函数无法叠加生效。
• 脚本执行时机与DOM渲染时机不匹配时，会触发空值读取报错。如果脚本早于对应DOM元素执行，document.getElementById("navigation")、document.getElementById("tothetop") 会返回null，后续读取null对象的classList、style属性时会直接中断JS执行，所有绑定的滚动回调都会被拦截，最终表现为两个功能全部失效。

1. 替换事件绑定方式，避免回调覆盖 #

放弃直接给window.onscroll赋值的写法，改用addEventListener注册滚动事件。该方式支持为同一个事件绑定多个独立回调，不会出现覆盖：

// 替换原来两行 onscroll 赋值代码
window.addEventListener('scroll', myFunction);
window.addEventListener('scroll', scrollFunction);

2. 调整脚本执行时机，解决元素空值问题 #

如果脚本是在页面头部引入、早于对应DOM元素渲染执行的，会触发空值读取报错。两种修复方式任选：

• 把所有脚本移到</body>标签之前，保证脚本执行时页面DOM已经完全渲染完成
• 监听DOMContentLoaded事件，等DOM渲染完毕后再执行元素获取、事件绑定的逻辑

3. 增加空值兜底，避免局部异常打断全局逻辑 #

给所有通过getElementById获取的DOM对象加存在性判断，单个元素加载失败时不会拖垮整体功能：

document.addEventListener('DOMContentLoaded', () => {
  // 处理粘性导航逻辑
  const navigation = document.getElementById("navigation");
  if (navigation) {
    const stickyOffset = navigation.offsetTop;
    window.addEventListener('scroll', () => {
      if (window.pageYOffset > stickyOffset) {
        navigation.classList.add("sticky");
      } else {
        navigation.classList.remove("sticky");
      }
    });
  }

  // 处理返回顶部逻辑
  const backToTopBtn = document.getElementById("tothetop");
  if (backToTopBtn) {
    window.addEventListener('scroll', () => {
      if (document.body.scrollTop > 98 || document.documentElement.scrollTop > 98) {
        backToTopBtn.style.display = "block";
      } else {
        backToTopBtn.style.display = "none";
      }
    });
    // 绑定返回顶部的点击触发逻辑
    backToTopBtn.addEventListener('click', () => {
      document.body.scrollTop = 0;
      document.documentElement.scrollTop = 0;
    });
  }
});

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