css 滚动时更改标题颜色

oipij1gg 于 2023-01-10 发布在其他

关注(0)|答案(3)|浏览(164)

我在Mac上使用VS。我两天前才开始编码，所以我是个菜鸟。我试图让一个固定的标题在滚动时改变颜色，尽管它不起作用。我不认为这是我的设置等问题，因为当我在网上运行它时，标题也没有从灰色变成黑色。

function changeRectangle() {
  const header = document.getElementById('header');
  var scrollValue = window.scrollY;
  if (scrollValue < 150) {
    header.classList.remove('header.active');
  } else {
    header.classList.add('header.active');
  }
  window.addEventListener('scroll', changeRectangle);
}

* {
  margin: 0;
  padding: 0;
}

.header.active {
  background: rgb(0, 0, 0);
  -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
  -moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
}

.header {
  position: fixed;
  height: 100px;
  width: 100%;
  z-index: 4;
  top: 0px;
  left: 0px;
  padding: 0;
  transition: all 1s;
  right: 0px;
  background-color: gray;
}

.lowerbackground {
  height: 1000px;
  width: 100%;
  background: white;
  position: absolute;
  top: 5000px;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <script type="text/javascript"></script>
</head>

<body>
  <div id="header" class="header"></div>
</body>

<script src="index.js"></script>

<body>
  <div class="lowerbackground"></div>
</body>

</html>

css

来源：https://stackoverflow.com/questions/75040896/changing-header-colour-on-scroll

3条答案

按热度按时间

g6ll5ycj1#

您的JavaScript代码有问题（您使用了错误的语法）

header.classList.remove('header.active');

正确的语法为

header.classList.remove('active');

与.add（）类似
下面是最终的JS代码

function changeRectangle() {
  const header = document.getElementById('header');
  var scrollValue = window.scrollY;
  if (scrollValue < 150) {
    header.classList.remove('active');
  } else {
    header.classList.add('active');
  }
}

window.addEventListener('scroll', changeRectangle);

希望这能帮上忙...

赞(0）回复(0）举报 2023-01-10

z4iuyo4d2#

有一些问题
1.事件处理程序内的addEventListener
1.正文标记太多
1.你改变了标题。active，你只需要改变active
1.您可以使用测试来切换活动，这样会更优雅

function changeRectangle() {
  const header = document.getElementById('header');
  var scrollValue = window.scrollY;
  header.textContent = scrollValue; // for visual testing
  header.classList.toggle('active',scrollValue >= 150);
}
window.addEventListener('scroll', changeRectangle);

* {
  margin: 0;
  padding: 0;
}

.header.active {
  background: #AA0000;
  -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
  -moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
}

.header {
  position: fixed;
  height: 100px;
  width: 100%;
  z-index: 4;
  top: 0px;
  left: 0px;
  padding: 0;
  transition: all 1s;
  right: 0px;
  background-color: gray;
}

.lowerbackground {
  height: 1000px;
  width: 100%;
  background: white;
  position: absolute;
  top: 5000px;
}

<div id="header" class="header">Header</div>
<div class="lowerbackground">Lower</div>

建议的HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Title is mandatory</title>
  <meta name="viewport" content="width=device-width, initial scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <script src="index.js"></script>
</head>
<body>
  <div id="header" class="header"></div>
  <div class="lowerbackground"></div>
</body>
</html>

赞(0）回复(0）举报 2023-01-10

ajsxfq5m3#

这些操作可能会解决您的问题。
1.首先将window.addEventListener('scroll', changeRectangle);移出函数changeRectangle。
1.其次，JS将header.active添加到DOM时，header.active不是有效的类名，请将其重命名为active，并在JS和CSS文件中相应地更改。
1.最后，您必须将!important设置为background，以给予其具有高特异性，从而覆盖.header类中的background。

HTML提示：

html元素最好具有lang属性。
1.这里有两个body元素，这并不好。
head元素内部应包含title元素。

最终代码

function changeRectangle() {
    const header = document.getElementById('header');
    var scrollValue = window.scrollY;
    if (scrollValue < 150) {
        header.classList.remove('active');
    } else {
        header.classList.add('active');
    }
}

window.addEventListener('scroll', changeRectangle);

* {
    margin: 0;
    padding: 0;
}

.active {
    background: rgb(0, 0, 0) !important;
    -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
    -moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
}

.header {
    position: fixed;
    height: 100px;
    width: 100%;
    z-index: 4;
    top: 0px;
    left: 0px;
    padding: 0;
    transition: all 1s;
    right: 0px;
    background-color: gray;
}

.lowerbackground {
    height: 1000px;
    width: 100%;
    background: white;
    position: absolute;
    top: 5000px;
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>home</title>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial scale=1.0" />
        <link rel="stylesheet" href="styles.css" />
        <script type="text/javascript"></script>
    </head>

    <body>
        <div id="header" class="header"></div>
    <div class="lowerbackground"></div>
    </body>

    <script src="index.js"></script>

</html>

赞(0）回复(0）举报 2023-01-10

我来回答

css 滚动时更改标题颜色

3条答案

最终代码

相关问题

热门标签

最新问答