jquery - 在滚动条上交叉淡入淡出固定背景图像

Question

我希望重新创建类似 FitBit 网站上的功能部分的内容，用户向下滚动主页然后到达固定图像部分，滚动时会交叉淡入淡出并保留可导航的滚动内容位置点:

https://www.fitbit.com/uk/flex

我已经研究了一段时间，发现了多个插件，但没有一个是完全正确的。特别是我想知道是否有人看到我可以使用的任何相关插件组合或关于如何在滚动时通过导航进行淡入淡出的初步想法？

谢谢!

Answer 1

简答:不需要任何特殊插件，使用相当简单的 JQuery 即可完成

详细信息:

我怀疑这里发生了什么非常复杂的事情。最近看到一个问题Here处理触发滚动变化——也就是说，当滚动高度达到一定水平时(下一个“页面”你希望不同的背景出现在上面)，你可以触发变化，比如改变背景图像。

为了使背景淡入淡出，只需使用 JQuery。 fadeIn()和 .fadeOut()在你的两张图片上。我假设您知道如何通过某种方法(例如 z-index)使图像出现在背景中。

其他的点点滴滴显然会有自己的设置要求。 fitbit 网站通常要复杂得多 - 它在页面的不同阶段表现不同，如果您使用不同的窗口大小查看它，它的表现也会不同(所有这些都可以使用 CSS @media 标签和 JQuery 来控制)。鉴于您的问题专门询问交叉淡入淡出部分，我没有解决页面的任何其他方面。我假设您已经知道如何去做或对复制它们不感兴趣 :)