时间戳

首页 > 解决方案 > 更改滚动时的背景颜色

javascript - 更改滚动时的背景颜色

问题描述

所以我尝试编写自己的代码版本来更改滚动页面的背景颜色。我已经在整个互联网上进行了搜索，但我一直在寻找 Jquery 示例，而没有真正向我展示如何做到这一点的香草 JS 示例。

我的第一个想法是在 css 中处理颜色和动画并在 JS 中触发它们。如果我想在 CSS 中处理动画，这是要走的路，不是吗？无论如何，我的代码显然不起作用，所以有人可以帮助我吗？

它可能没有应有的效率，因此那里的任何提示也会有所帮助。

我还没有完成 css 中的动画部分，但基础工作已经奠定。所以我的想法是选择所有不同的颜色，然后将它们放入一个数组中。然后在函数内部创建一个 for 循环。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css\style.css">
    <title>Site experiment</title>
</head>
<body>

<section>
<h1 id="first-h1">This site is an experiment on scroll effects</h1>
</section>

<section>
<h1 id="second-h1">I really hope this helps me learn vanilla JavaScript better</h1>
</section>

<section>
<h1 id="third-h1">I think it will honestly</h1>
</section>

<section>
<h1 id="fourth-h1">Or maybe it will frustrate me till the end of time</h1>
</section>

<section>
<h1 id="fifth-h1">Even if that does happen, I'll still keep trying</h1>
</section>

</body>
<script src="js\app.js"></script>
</html>

@import url('https://fonts.googleapis.com/css?family=Roboto+Mono');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Roboto Mono', monospace;
}

body {
    background-color: #E5E1EE;
    transition: 0.3s all;
}

section {
    height: 100vh;
}

h1 {
    margin: 15rem;
}

.lightCyan {
    background-color: #DFFDFF;
}

.darkSkyBlue {
    background-color: #90BEDE;
}

.aquamarine {
    background-color: #68EDC6;
}

.electricBlue {
    background-color: #90F3FF;
}

    let bdy = document.querySelector('body');
let cyan = bdy.classList.add('lightCyan');
let skyBlue = bdy.classList.add('darkSkyBlue');
let aqua = bdy.classList.add('aquamarine');
let electric = bdy.classList.add('electricBlue');
let colors = [cyan, skyBlue, aqua, electric];


window.addEventListener('scroll', function () {
    if (document.documentElement.scrollTop || document.body.scrollTop > window.innerHeight) {
        for(let i = 0; i < colors.length; i++) {
           colors.push(i);
        }
    }
})

标签： javascriptcssarraysanimation

解决方案

如果您想在给定部分到达屏幕顶部时更改背景颜色，您可以尝试以下操作：

const colors = ['', 'lightCyan', 'darkSkyBlue', 'aquamarine', 'electricBlue']

const sections = [...document.getElementsByTagName('section')]

window.addEventListener('scroll', function () {

  const scrollFromTop = window.pageYOffset

  for (let i = 0; sections.length > i; i++) {

    if (scrollFromTop <= sections[i].offsetTop) {
      document.body.className = colors[i] 
      break
    } 

  }

})
@import url('https://fonts.googleapis.com/css?family=Roboto+Mono');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Roboto Mono', monospace;
}

body {
  background-color: #E5E1EE;
  transition: 0.3s all;
}

section {
  height: 100vh;
}

h1 {
  margin: 15rem;
}

.lightCyan {
  background-color: #DFFDFF;
}

.darkSkyBlue {
  background-color: #90BEDE;
}

.aquamarine {
  background-color: #68EDC6;
}

.electricBlue {
  background-color: #90F3FF;
}
<section>
<h1 id="first-h1">This site is an experiment on scroll effects</h1>
</section>

<section>
<h1 id="second-h1">I really hope this helps me learn vanilla JavaScript better</h1>
</section>

<section>
<h1 id="third-h1">I think it will honestly</h1>
</section>

<section>
<h1 id="fourth-h1">Or maybe it will frustrate me till the end of time</h1>
</section>

<section>
<h1 id="fifth-h1">Even if that does happen, I'll still keep trying</h1>
</section>

推荐阅读