Angular 使用“角度”在内容上滚动粘性标题无事件

我正在尝试使用角度材质设置两个粘性div（一个header，一个sidenav）。Sticky divs可以工作，但当我向下滚动到我的内容时，滚动事件除外

当我向下滚动时，我有这样的东西：

我的问题是： 向下滚动时，Angular没有任何滚动事件。如果我通过将值设置为height css属性来更改style.scss文件，则所有sticky div将不再工作，但我的scroll事件来自Angular

这让我很紧张：（ 有什么办法解决这个问题吗？非常感谢

style.scss

html, body { 
    min-height: auto; // sticky header doesn't work but scroll event Angular OK
    // height: 100%; // sticky header works but scroll event Angular NOK
}

body { 
    margin: 0; 
    font-family: Roboto, "Helvetica Neue", sans-serif; 
}

粘性标题代码：

app.component.html

---

主包装上有以下规则：

.app-wrapper {
    height: 100%; // doesn't have any effect since parent's(app-root) height is 0 
    overflow-x: hidden; <== remove this
}

---

简单添加此

您能创建一个演示链接并共享吗？此Q与您的问题有关？您应该使用一些实用功能（Dedect滚动到view/Window.innerHeight等是Javascript/Web API核心的一部分-不特定于angular）。或“非常复杂”触发想法你应该使用像这样的第三方插件：WayPoints.js--package：你在问题中提到了sidenav。它在哪里？它有什么重要意义吗？1.我要添加一个stackblitz演示2.我认为这更多的是一个css问题，或者html页面是如何构建的，但不确定。3.实际上，sidenav是我的粘性菜单。演示链接：In style.scss，将高度从“自动”更改为100%，粘性标题将起作用。非常感谢您的帮助，但我还有最后一个问题，导航菜单如何向右或向左移动取决于活动项？再次感谢：）您的意思是如何在滚动时突出显示活动菜单项？我想要我的粘性菜单（带垫子芯片）向右或向左移动以仍能看到活动类别，例如，如果向下滚动项目列表，我希望看到相应的导航项目被完全显示。您可以使用
transform:translateX
rule on
mat chips list
元素来移动项目，我不确定这是否是解决方案。当我有太多导航项目时，我可以向右滚动。但如果用户向下滚动内容，则不会自动显示活动项。如果用户向下滚动，导航菜单将自动滚动至活动导航项目。希望我能理解
.nav-menu {
    ...
    overflow: hidden;  <==== this one
}