Angular中如何检测用户滚动至距离页面顶部50px位置

核心逻辑说明 #

要检测是否滚动到距离页面顶部50px的区域，直接利用window.scrollY（等价于window.pageYOffset）即可，这个属性返回滚动条相对于页面顶部的垂直偏移量。正确的判断条件是：

const isNearTop = window.scrollY <= 50;

这个条件只会在滚动条距离顶部不超过50px时成立，完全解决了你之前遇到的“顶部区域向下滚动时条件也成立”的问题。

结合@HostListener的完整实现 #

在Angular组件中通过@HostListener监听窗口滚动事件的完整代码如下：

import { Component, HostListener } from '@angular/core';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponentComponent {
  @HostListener('window:scroll', ['$event'])
  onWindowScroll(event: Event): void {
    // 判断是否滚动至距离顶部50px以内
    const isNearTop = window.scrollY <= 50;
    
    if (isNearTop) {
      // 这里编写触发后的业务逻辑，比如修改导航样式、显示提示等
      console.log('已滚动到距离页面顶部50px的位置');
    }
  }
}

可选：精确检测滚动到50px位置 #

如果需要精确检测滚动到刚好距离顶部50px的位置（而非以内），可以给判断加个小误差范围（因为滚动事件是连续触发的，很难刚好停在50px）：

const targetOffset = 50;
const isAtTarget = Math.abs(window.scrollY - targetOffset) <= 2; // 允许±2px的误差

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