Angular 5滚动固定菜单问题：scrollTop值始终为0不更新

你遇到的这个scrollTop一直为0的问题很常见，主要是因为不同浏览器环境下，存储滚动距离的元素不一样。在Angular项目里，直接取document.body.scrollTop往往得不到正确的值，我们需要调整获取滚动高度的方式。

修正后的组件代码 #

import { Component, OnInit, Inject, HostListener } from '@angular/core'; 
import { Location} from '@angular/common'; 
import { DOCUMENT } from "@angular/platform-browser"; 

export class DashboardComponent implements OnInit { 
  constructor(private _location: Location, @Inject(DOCUMENT) private doc: Document) { } 

  public fixed: boolean = false; 

  @HostListener("window:scroll", []) 
  onWindowScroll() { 
    // 改用这种兼容方式获取滚动距离，适配不同浏览器和Angular环境
    const scrollTop = window.pageYOffset || this.doc.documentElement.scrollTop || this.doc.body.scrollTop || 0;
    console.log("scroll top", scrollTop);

    if (scrollTop > 50) {
      this.fixed = true;
    } else if (this.fixed && scrollTop < 5) {
      this.fixed = false;
    }
  }

  ngOnInit(): void {
    // 初始化时先检查一次滚动位置，避免页面加载时滚动状态不对
    const scrollTop = window.pageYOffset || this.doc.documentElement.scrollTop || this.doc.body.scrollTop || 0;
    this.fixed = scrollTop > 50;
  }
}

为什么原来的方式不行？ #

• 当页面的全局滚动容器不是body时（比如部分布局会把滚动逻辑放在根容器上），document.body.scrollTop就会一直返回0。
• 现代浏览器更推荐使用window.pageYOffset获取全局滚动距离，它是只读属性，能准确返回页面相对于视口顶部的滚动像素值。
• 额外加上document.documentElement.scrollTop和document.body.scrollTop是为了兼容旧版本浏览器，确保在各种环境下都能拿到正确值。

额外检查点 #

1. 确认页面没有把滚动事件绑定到某个内部容器上（比如设置了overflow: auto的div），如果是这种情况，你需要监听对应容器的scroll事件，而非window的。
2. 检查CSS中是否给body或html设置了height: 100%和overflow: hidden，这会导致全局滚动失效，scrollTop自然不会变化。

你的HTML和CSS代码是没问题的，只要修正scrollTop的获取方式，就能实现菜单滚动到顶部后固定的效果啦！

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