CSS & Javascript:更改滚动时的背景颜色

下面的示例向您展示了如何在用户向下滚动时动态更改网页的背景颜色。我们只使用 CSS 和 vanilla Javascript 来制作它。

示例预览

CSS & Javascript:更改滚动时的背景颜色

完整代码

<!doctype html>
<html>

<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">
    <title>KindaCode.com</title>

    <style>
        * {
            box-sizing: border-box
        }

        body {
            height: 1000vh;
            transition: background 1s ease;
        }

        .content {
            padding: 50px;
            color: white;
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="content">
        <h1>Welcome to KindaCode.com</h1>
    </div>

    <script>
        var body = document.getElementsByTagName('body')[0];
        body.style.backgroundColor = 'green';

        // trigger this function every time the user scrolls
        window.onscroll = function (event) {
            var scroll = window.pageYOffset;
            if (scroll < 300) {
                // green
                body.style.backgroundColor = 'green';
            } else if (scroll >= 300 && scroll < 600) {
                // yellow
                body.style.backgroundColor = 'yellow';
            } else if (scroll >= 600 && scroll < 1200) {
                // blue
                body.style.backgroundColor = 'blue';
            } else if (scroll >= 1200 && scroll < 1800) {
                // orange
                body.style.backgroundColor = 'orange';
            } else if (scroll >= 1800 && scroll < 3000) {
                // red
                body.style.backgroundColor = 'red';
            } else {
                // purple
                body.style.backgroundColor = 'purple';
            }
        }
    </script>
</body>

</html>

解释

每次用户向上或向下滚动时,我们都会调用一个可以操作背景颜色的函数:

window.onscroll = function (event) {
  // other code here
}

为了计算滚动距离,我们使用这个:

var scroll = window.pageYOffset;

要以编程方式设置背景颜色,我们使用以下 Javascript 代码:

body.style.backgroundColor = 'green';

为了使颜色过渡平滑,我们添加了这个 CSS 行:

transition: background 1s ease;