问在Netflix、w3schools等网站上，这个职位是如何从相对于固定的、动态的/程序化的？

EN

我在Netflix主页上观察到--当滚动标题容器(请参见下图：netflix主页 )时，样式将自动从相对位置更改为固定位置，以便始终停留在顶部。我在许多网站上看到了类似的行为: espncrinfo或https://www.w3schools.com/bootstrap/default.asp。我有兴趣知道这些网站是如何做到这一点-只是看看铬开发工具并没有给我太多的细节。

问题：

它是否就像只听滚动事件(javascript)并更新样式一样简单，还是可以通过使用CSS而不听滚动事件来完成呢？只是好奇，因为我对css的基本知识，但不知道我是不是错过了任何高级技术，如转换或翻译这里？

前滚动: html：

<div class="pinning-header-container" style="top: 0px; position: relative; background: transparent;">
</div>

css：

element.style {
  top: 0px;
  position: relative;
}

后卷轴：

element.style {
    top: 0px;
    position: fixed;
    background: rgb(20, 20, 20);
}