我正在寻找重新创建FitBit网站上功能部分的内容,用户向下滚动主页面然后到达滚动时交叉渐变的固定图像部分并保留可导航的滚动内容位置点:
https://www.fitbit.com/uk/flex
我已经看了一段时间了,已经发现了多个插件,但没有一个是正确的。特别是我想知道是否有人看过任何我可以使用的相关插件组合或者在滚动时如何通过导航进行交叉淡入淡出的初步想法?
谢谢!
答案 0 :(得分:0)
简短回答:不需要任何特殊的插件,可以用相当简单的JQuery完成
<强>详细强>:
我怀疑这里发生了什么严重的事情。我最近看到的一个问题Here处理触发滚动的更改 - 也就是说,当滚动高度达到一定水平时(下一个&#34;页面&#34;你想要的不同)要显示的背景,您可以触发更改背景图像等更改。
为了使背景交叉渐变,只需在两个图像上使用JQuery。fadeIn()和.fadeOut()。我假设您知道如何通过某种方法(例如,z-index)使图像显示在背景中。
其他部分显然会有自己的设置要求。 fitbit网站通常要复杂得多 - 它在页面的不同阶段表现不同,如果用不同的窗口大小查看它会有所不同(所有这些都可以使用CSS @media标签和JQuery控制)。鉴于您的问题具体涉及交叉淡化部分,我还未解决该页面的任何其他方面问题。我假设您已经知道如何做或不想复制它们:)