时间戳

首页 > 解决方案 > 更改滚动元素的颜色

javascript - 更改滚动元素的颜色

问题描述

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

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

white
black
black
white
green
etc.

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

但我想知道是否有某种方法可以通过 javascript 获取当前位于标题下方的元素（位于 div 下方的 div）。在下面，我在视觉上喜欢下面的 z-index。

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

标签： javascripthtmlcss

解决方案

您可以为此使用document'scroll事件。

然后，使用' windows可以确定滚动了多远。pageYOffsetscrollMaxY

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);
<p id="example" style="foreground-color:#FF0000">Color!</p>

推荐阅读