gpt4 book ai didi

html - 导航从透明变为彩色背景

转载 作者:太空宇宙 更新时间:2023-11-03 18:34:15 28 4
gpt4 key购买 nike

我已经连续做 10 个小时了,我尝试了不同类型的定位 g,但就是行不通。当您向下滚动页面并且导航从透明背景变为白色背景时,我无法复制这种有趣的效果。该示例可在 http://www.bakkenbaeck.no/ 找到谁能指出我正确的方向?

最佳答案

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

我有点猜测您在给出的示例中具体指的是什么,但对于这篇文章,我假设您指的是用户向下滚动超过初始全高图像时发生的变化您会看到 Logo 从白色变为灰色,并且该导航区域的背景变为白色。

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

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

希望这能给你一些指导!

关于html - 导航从透明变为彩色背景,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19105314/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com