html - 是否可以使用纯 CSS 更改滚动上的此 div 颜色？

Question

感谢您花时间阅读我的帖子。所以我最近开始了自由职业(CSS 和 HTML)，我发现了我的第一个困难。

查看绿色条(它是一个固定的 div)，它的绿色用于测试海豚，但客户希望它在这个橙色背景之上时是透明的...

...但是在这个白色背景上切换到另一种颜色(这样可以看到字母)

这可能与 CSS 相关吗？如果是这样，我该怎么做？再次感谢!

Answer 1

纯 css 目前对屏幕上和不在屏幕上的内容没有任何响应。所以，简短而蹩脚的回答是“不仅仅是 css。”

话虽这么说，用 js 很容易做到这一点。

您要查找的事件是 scroll event .

您可以从那里添加/删除样式类。

像这样:

// wait for document.addEventListener("DOMContentLoaded");

const myHeader = document.getElementById("MyHeader");
window.addEventListener("scroll", () => {
  const scrollPos = window.scrollY;
  if (scrollPos ... add your logic here) {
    myHeader.classList.add("scrollIsThing");  // this is the css class you'll target
  } else {
    myHeader.classList.remove("scrollIsThing");
  }
});

抱歉，没有好的 css 方法可以做到这一点。