更改滾動元素的顏色

Question

我有一個帶有徽標和一些文字的固定 header。 這些元素目前是白色的。 （背景顏色：#fff）

當我向下滾動時，部分會出現不同的背景 colors：

white
black
black
white
green
etc.

我想根據 header 當前在上面的部分更改 header 中元素的顏色。 我可以使用混合模式（白色/黑色）來做到這一點，但我也有綠色部分。 我也可以通過檢查視圖中的部分然后更改顏色來做到這一點。

但我想知道是否有某種方法可以通過 javascript 獲取當前低於 header（低於 div 的 div）的元素。 在下面，我在視覺上喜歡下面的 z-index。

如果是這樣，我還可以獲得元素的 css styles。 有任何想法嗎？

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

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