更改滚动元素的颜色答案

【问题标题】：Change color of element on scroll更改滚动元素的颜色
【发布时间】：2021-04-27 13:01:08
【问题描述】：

我有一个带有徽标和一些文字的固定标题。这些元素目前是白色的。（背景颜色：#fff）

当我向下滚动时，部分会出现不同的背景颜色：

white
black
black
white
green
etc.

我想根据标题当前所在的部分更改标题中元素的颜色。我可以使用混合模式（白色/黑色）来做到这一点，但我也有绿色部分。我也可以通过检查视图中的部分然后更改颜色来做到这一点。

但我想知道是否有某种方法可以通过 javascript 获取当前位于标题下方的元素（位于 div 下方的 div）。在下面我看起来像下面的 z-index。

如果是这样，我还可以获得元素的 css 样式。有什么想法吗？

【问题讨论】：

检查这支笔：codepen.io/daveredfern/pen/zBGBJV
你能举一个你的HTML结构的例子吗？此外，您究竟希望何时更改标题元素的颜色 - 是当一个部分的顶部位于视口中时，还是（部分）正好位于标题底部的部分？
这是一支您所描述的笔：codepen.io/paulmartin91/pen/eYgomzy?editors=1111
@PaulMartin 这正是我想要实现的。但是我不知道容器的高度。它们因内容而异。如果你听 mousemove 你会得到鼠标当前所在的元素。我想知道这样的事情也存在于 div over div（容器上的标题）而不是计算容器的偏移量。
你可以... let firstHeight = document.getElementById("1").offsetHeight ...获取每个元素的高度，然后... if (userScroll > first && userScroll

标签： javascript html css

【解决方案1】：

您可以利用document 的scroll 事件来实现此目的。

然后，使用window 的pageYOffset 和scrollMaxY，您可以确定滚动的距离。

var maxOffset = window.scrollMaxY;
function onScroll(event) {
  let offset = window.pageYOffset;
  let color = "#"+(Math.round(offset/maxOffset*9))+"00000";

  document.getElementById("example").style = "color:"+color+";";
  
}
document.addEventListener('scroll', onScroll);

&lt;p id="example" style="foreground-color:#FF0000"&gt;Color!&lt;/p&gt;

【讨论】：