Question

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

当你第一次开始滚动时，初始部分保持原位（z-index为1？），而内容滚动到顶部。它还使用片段并根据用户滚动到的区域动态突出显示它的导航栏。

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

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

Answer 1

前两部分正在使用position:fixed。

此将项目修复到页面上的某个位置。即使滚动，它们也不会移动。

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

这样滚动很好，因为它比z-index元素高fixed position，它会滚动它们。

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类。