我注意到很多网站最近都在实现新类型的滚动效果。这里有一个例子：
https://banksimple.com/
当你第一次开始滚动时，初始部分保持不变(z索引为1？(，而内容在其顶部滚动。它还使用片段，并根据用户滚动到的区域动态突出显示导航栏。
我见过一些网站使用类似的技术。其中一个(我找不到链接(动态更改背景。
有没有一种通用的技术用于这些类型的网站？
前两部分使用position:fixed。
这将项固定到页面上的某个位置。即使滚动，它们也不会移动。
滚动部分使用具有高z-index的position:absolute。
这会很好地滚动，因为它具有比fixed position元素更高的z-index，所以它会在它们之上滚动。
有几种方法可以做到这一点，但最简单的方法是简单地制作一个div，并使用CSS
"position:fixed;"
财产。这将导致div相对于浏览器窗口精确地停留在它所在的位置。
您可能还想将z-index设置为一个大值，这样div就一定会位于页面的其余部分之上。
对于菜单和标题，这是一个使用position: fixed和z-index的简单CSS解决方案。菜单和标题都有position: fixed，而菜单有一个大的z-index值，主要内容有一个略低的值：
#menu { position: fixed; top: 0; left: 0; z-index: 2000; }
#header { position: fixed; top: ??; left: 0; }
#wrapper { z-index: 10; }
至于碎片的事情，它是使用JS完成的。W3Fools也有同样的功能，使用jQuery完成。也许你可以破译这个剧本。看起来它挂钩到文档的滚动事件，检查元素的位置是否在视口的位置上方，并采取相应的操作。
一种方法是结合CSS+JavaScript，比如说(jQuery(
CSS：
顶部面板为position:fixed。
使用jQuery偏移量来检测容器位置，然后可以为"高亮导航栏"应用CSS类。