在屏幕上交叉淡入淡出固定背景图像

Question

我正在重新创建FitBit网站上的功能部分，用户向下滚动主页面，然后进入固定图像部分，在滚动时交叉淡入淡出并保留导航滚动内容位置点：

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

我一直在看这一段现在已经找到了多个插件，但他们都不是完全正确的。特别是我想知道是否有人看过我可以使用的任何相关插件组合，或者想了解如何在滚动时使用导航进行交叉淡入淡出？

谢谢！

Answer 1

简答：有没有需要任何特殊的插件，它都可以用合理简单的jQuery

详细完成：

我怀疑有什么严重的复杂回事。我最近看到的一个问题是Here，它处理滚动上的触发更改 - 也就是说，当滚动高度达到某个级别（下一个“页面”时，您希望不同的背景出现），您可以触发更改，如更改背景图像。

为了使背景交叉淡入淡出，只需使用JQuery即可。 fadeIn()和.fadeOut()在您的两个图像上。我假设你知道如何通过某种方法在背景中显示图像（例如z-index）。

其他零碎件显然有自己的要求来设置。 fitbit网站一般来说要复杂得多 - 它在页面的不同阶段表现不同，如果用不同的窗口大小查看，则又会有所不同（所有这些都可以使用CSS @media标记和JQuery来控制）。鉴于您的问题具体询问了淡入淡出部分，我没有提到该页面的任何其他方面。我假设你已经知道如何做他们或不想复制他们:)