向下滚动到新页面时，固定位置元素会更改颜色

Question

我看到了Google Material Design website，当你向下滚动时，左边的粘性“讲话泡泡”的颜色变化让人惊讶。

我试图理解这个概念，但谷歌的代码是巨大的，有点令人困惑...... 我认为实际上有两个图像，但我不能仅仅使用不同的z-index值重新创建它（我可以让第一个图像消失，第一个图像出现但是组合它不起作用）。

我需要一个JS库吗？ Waypoints/scrollreveal等，这是某种SVG魔法还是我忽略了一个简单的解决方案？

Answer 1

在简单的用法上尝试onScroll（）方法，使用js在元素上应用基本的css颜色。

Answer 2

• 我相信这些是动画对象，并且各个部分（它们的容器）都有溢出：隐藏，因此这些对象保留在它们的部分中。
• 他们也可能有位置：固定和定位使用＆＃39; top＆＃39;并且＆＃39;离开＆＃39;属性一直存在（或者可能是一些JavaScript魔术）。
• 当访问者距离页面顶部一定距离时，使用JavaScript函数scrollTop（）启动动画。
• 我不确定在这个确切的页面中使用了什么，但您可以根据使用JavaScrip的页面顶部的位置来更改和调整比例，大小，颜色和透明度 - 100％。