感谢您抽出宝贵的时间阅读我的帖子.
因此,我最近开始自由职业(CSS和HTML),并且发现了我的第一个困难.
看看绿色的条(固定的div),它的绿色用于测试海豚,但是客户希望它在橙色背景之上时是透明的…
…但是在此白色背景上切换为另一种颜色(因此可以看到字母)
CSS可以做到这一点吗？如果是这样,我该怎么办？
再次感谢！
最佳答案
目前,纯CSS对屏幕上显示的内容和没有显示的内容都没有任何响应.因此,简而言之,答案是“不只是CSS”.
原文链接：https://www.f2er.com/html/530497.html话虽这么说,用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方法可以做到这一点.
