1

我已经连续工作了 10 个小时，我尝试了不同类型的定位，但它只是不起作用。我无法复制这种有趣的效果，您向下滚动页面并且导航从透明背景变为白色背景。该示例可以在http://www.bakkenbaeck.no/找到任何人可以指出我正确的方向吗？

4

2 回答 2

0

Reaserch Paralax scrolling 如果你不熟悉 js，网上有很多教程，你会发现如果你一步步跟着他们会很容易，这里有一些我用过的：

http://www.impressivewebs.com/parallax-scrolling-scripts-plugins/

这真的很容易，不要让 jQuery 吓到你 google 上有很多例子！

于 2013-09-30T23:19:47.393 回答
0

TL;DR 这种效果不仅是通过 HTML 和 CSS 实现的，还需要一些 JS 来实现。

我猜测你在给出的那个例子中具体指的是什么，但我会假设你在这篇文章中指的是一旦用户向下滚动超过你看到的初始全高图像时发生的变化徽标从白色变为灰色，并且此导航区域的背景变为白色。

不知道你的技能水平/知识很难对什么会给你指明方向做出假设，但我会尽力而为。这里发生的是 CSS z-index、一些 javascript 和重复菜单的创造性使用。如果您将网页视为一叠纸，那么第一张纸就是位于第二页顶部的菜单，即打开图像，然后是第三页，即下一个（重复）菜单。复制菜单正好位于第一个菜单下方。当你向下滚动时，你会移除中间的图像层，新的导航会通过一些 JS 暴露出来。有一个页面滚动事件侦听器 (javascript) 正在检查页面当前滚动到的位置。一旦用户到达徽标和导航需要开始更改的位置，javascript启动并开始将第一个导航的高度设置为每超过滚动点1px就小1px，直到它达到0px的高度有效地隐藏它。如果您通过检查两个导航来查看 chrome web 工具的内部，您可以在滚动时看到这种情况（导航的高度缩小）。

我可以看到该站点正在使用http://pagescroller.com/这可能是他们用来触发我所描述的高度调整的插件。

希望能给你一些方向！

于 2013-09-30T23:36:05.940 回答