HTML滚动效果

Question

我注意到很多网站最近正在实施新的滚动效果类型。这里有一个例子：

https://banksimple.com/

当你第一次开始滚动的最初部分留在地方（1 z-index的？），而内容滑过它的顶部。它还使用片段，并根据用户滚动到的区域动态突出显示其导航栏。

我见过几个网站使用类似的技术。其中一个（我找不到链接）动态改变背景。

是否有一种常用的技术用于这些类型的网站？

Answer 1

前两部分使用position:fixed。

This fixes items to a position on the page。即使滚动，他们也不会移动。

滚动部分使用position:absolute高z-index。

这个滚动条很好，因为它有一个比fixed position元素更高的z-index，它滚动它们。

Answer 2

有几种方法可以做到这一点，但最简单的就是只是让一个div，并使用CSS

"position:fixed;" 

财产。这会导致div相对于浏览器窗口完全粘在原来的位置。

您可能还希望将z-index设置为较大的值，以便div可以保持在页面的其余部分之上。

Answer 3

对于菜单和标题，这是一个简单的使用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完成。也许你可以破译the script。看起来像挂钩到文档的滚动事件，检查位置是否元素高于视口的位置，并相应采取行动。

Answer 4

一种方法是结合CSS + JavaScript的假设（jQuery的）

CSS：

position:fixed的顶部面板。

使用jQuery offset来检测容器位置，然后您可以为“高亮导航栏”应用CSS类。