为什么我的卷轴事件触发得这么慢？Javascript，角度

我正在写一个非常基本的标题，当用户滚动时，它将固定在页面顶部。这是一个很难调试的问题，因为大多数人都有与我所经历的相反的问题。我的代码正在运行；然而，在应用的类中有一个显著的延迟。这是我的密码：

CSS:

JS:

}

---

这个代码在技术上是有效的。当我滚动时，事件触发，类被添加，标题被“卡住”，但是滚动事件只在用户停止滚动后才会触发，然后实际添加类还需要一两秒钟的时间。最近还有其他人有这个问题吗？顺便说一句，我是在Chrome上开发的。但是我在其他浏览器中测试了这个问题，得到了相同的结果。

您知道，使用Angular时不应该直接访问dom。只是一个优化提示：不要在handleScroll回调中执行头选择器。。。现在它必须每秒执行该操作数十次。@Ploppy你的意思是我应该使用@ViewChild吗？是的，这就是我的意思

.sticky { 
         position: fixed;
         top: 10px; 
         left: 0px;
         right: 0px;
}

@HostListener('window:scroll') onScroll() {
this.handleScroll();
};

...

handleScroll() {
const header = document.getElementById('stickyBumper');
const distanceToTop = window.scrollY;




if (distanceToTop > 200) {
  if (!header.classList.contains('sticky')) {
    header.classList.add('sticky');
  }
} else {
  header.classList.remove('sticky');
}