Vue实现滚动后固定div报错window.scrollTop不是函数如何解决

报错根因 #

• 你混淆了jQuery方法和原生DOM API：scrollTop()是jQuery封装的实例方法，原生window对象上不存在这个方法，直接调用就会抛出类型错误。
• 代码还存在三个隐性问题：事件绑定在created钩子时机过早（DOM未完成挂载）、没有写固定状态还原逻辑、组件销毁时未移除事件监听会造成内存泄漏。

修复步骤 #

1. 替换错误的滚动值获取逻辑
   原生JS获取窗口垂直滚动距离用属性读取，不要加括号调用方法，兼容写法如下：

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

2. 补全状态还原逻辑
   当滚动距离小于阈值时，要把元素的定位改回默认值，否则元素会一直固定在顶部无法归位。
3. 调整事件绑定时机+解绑逻辑
   把滚动事件绑定从created移到mounted钩子（DOM挂载完成后再绑定），组件销毁时移除事件监听避免内存泄漏。

修复后完整代码 #

export default {
  mounted() {
    // DOM挂载完成后再绑定滚动事件
    window.addEventListener('scroll', this.calendarScroll);
  },
  beforeUnmount() {
    // Vue2 项目请替换为 beforeDestroy 钩子
    window.removeEventListener('scroll', this.calendarScroll);
  },
  methods: {
    calendarScroll() {
      const dateHeader = document.querySelector('.dates-header');
      if (!dateHeader) return;
      // 正确读取滚动距离
      const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
      if (scrollTop >= 200) {
        dateHeader.style.top = '0';
        dateHeader.style.position = 'fixed';
      } else {
        // 还原默认定位
        dateHeader.style.position = 'static';
        dateHeader.style.top = 'auto';
      }
    }
  }
}

注意：如果你的滚动容器是页面内的独立区块而非整个浏览器窗口，需要读取对应滚动容器DOM的scrollTop属性，不要读取window的滚动值。

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