html - HTML 滚动效果

Question

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

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

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

是否有用于这些类型网站的通用技术？

score 0 · Accepted Answer

The first two sections are using position:fixed.

This fixes the items to a position on the page. They don't move, even with scrolling.

The scrolling section uses position:absolute with a high z-index.

This scrolls fine and because it has a higher z-index than the fixed position elements, it scrolls over them.

score 0 · Accepted Answer

There's several ways to do this, but the easiest is to simply make a div, and use the CSS

"position:fixed;"

property. This will cause the div to stick exactly where it is, relative to the browser window.

You may also want to set you z-index to a large value so that the div is certain to stay on top of the rest of the page.

score 0 · Accepted Answer

对于菜单和标题，它是一个使用position: fixed和的简单 CSS 解决方案z-index。menu 和 header 都有position: fixed，而 menu 的z-indexvalue 较大，而 main content 的 value 略低：

#menu { position: fixed; top: 0; left: 0; z-index: 2000; }
#header { position: fixed; top: ??; left: 0; }
#wrapper { z-index: 10; }

至于fragment这件事，是用JS来完成的。W3Fools也有同样的事情，使用 jQuery 完成。也许你可以破译剧本。看起来它与文档的滚动事件挂钩，检查元素是否高于视口位置，并采取相应措施。

score 0 · Accepted Answer

一种方法是结合 CSS + JavaScript 让我们说（jQuery）

CSS：

position:fixed用于顶部面板。

使用jQuery 偏移量来检测容器位置，之后您可以为“highlights navbar”应用 CSS 类。

4 回答 4