更改滚动图上元素的颜色

Question

我有一个固定的头与一个标志和一些文本。这些元素当前为白色。（背景颜色:#fff)

当我向下滚动时,各部分以不同的背景颜色显示：

white
black
black
white
green
etc.

我想改变标题中元素的颜色，这取决于标题当前在上面的部分。我可以做混合模式（白色/黑色），但我也有绿色部分。我也可以这样做，检查什么部分是在视图中，然后改变颜色。

但是我想知道是否有某种方法可以通过JavaScript获得当前在header下面的元素（在div下面的div）。通过下面我的视觉像Z索引下面。

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

Answer 1

您可以为此利用document的scroll事件。

然后，使用window的pageyoffset和scrollmaxy可以确定滚动多远。

null

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);

html lang-html prettyprint-override"><p id="example" style="foreground-color:#FF0000">Color!</p>