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

前端之家收集整理的这篇文章主要介绍了html-是否可以使用纯CSS在滚动上更改此div颜色? 前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

感谢您抽出宝贵的时间阅读我的帖子.
因此,我最近开始自由职业(CSS和HTML),并且发现了我的第一个困难.

First example image

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

second example image

…但是在此白色背景上切换为另一种颜色(因此可以看到字母)

CSS可以做到这一点吗?如果是这样,我该怎么办?
再次感谢!@H_301_14@

最佳答案@H_301_14@
目前,纯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方法可以做到这一点.@H_301_14@ 原文链接:https://www.f2er.com/html/530497.html

猜你在找的HTML相关文章