本地实现Codepen的「Magic scrolling colours」滚动背景变色效果失败求助

嘿，我瞅了下你的代码，发现两个核心问题导致滚动变色效果没生效，这就给你拆解清楚：

问题1：重复嵌套的script标签 #

你在HTML里写JS的时候，不小心嵌套了两层<script>标签——外层已经有一个<script>了，里面又套了一个，这会让浏览器直接解析失败，JS代码根本跑不起来。得把内层的那个<script>删掉，只保留最外层的一对标签包裹JS代码。

问题2：没引入jQuery库 #

Codepen的编辑环境默认已经帮你加载了jQuery，但本地打开HTML文件时，浏览器可不会自动帮你加这个库。你的代码全是基于jQuery写的，没引入的话自然完全失效。你需要在自己的JS代码之前引入jQuery：

• 可以去jQuery官网下载最新的压缩版文件（比如jquery.min.js），放到你的项目文件夹里，然后用相对路径引入；
• 或者用CDN方式引入（如果是本地离线环境，更推荐下载本地文件）。

修复后的完整HTML示例 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="style.css" rel="stylesheet">
    <!-- 先引入jQuery，这里假设你把jquery.min.js放在项目根目录 -->
    <script src="jquery.min.js"></script>
</head>
<body>
    <div class="panel" data-color="white">
        <div>
            <h1>Magic scrolling colours</h1>
            <p>Scroll to animate the background colour of the body as a full height panel becomes visible.</p>
            <p>I have tried to comment the code, particurly the JavaScript, as much as possible. I hope it's clear to understand.</p>
            <p>If you have any questions my twitter is @daveredfern.</p>
        </div>
    </div>
    <div class="panel" data-color="violet">
        <h2>Violet panel</h2>
    </div>
    <div class="panel" data-color="indigo">
        <h2>Indigo panel</h2>
    </div>
    <div class="panel" data-color="blue">
        <h2>Blue panel</h2>
    </div>
    <div class="panel" data-color="green">
        <h2>Green panel</h2>
    </div>
    <div class="panel" data-color="yellow">
        <h2>Yellow panel</h2>
    </div>
    <div class="panel" data-color="orange">
        <h2>Orange panel</h2>
    </div>
    <div class="panel" data-color="red">
        <h2>Red panel</h2>
    </div>

    <!-- 修复了嵌套的script标签 -->
    <script>
        jQuery(function($){
            $(window).scroll(function() {
                // selectors
                var $window = $(window),
                $body = $('body'),
                $panel = $('.panel');

                // Change 33% earlier than scroll position so colour is there when you arrive.
                var scroll = $window.scrollTop() + ($window.height() / 3);

                $panel.each(function () {
                    var $this = $(this);

                    // if position is within range of this panel.
                    // So position of (position of top of div <= scroll position) && (position of bottom of div > scroll position).
                    // Remember we set the scroll to 33% earlier in scroll var.
                    if ($this.position().top <= scroll && $this.position().top + $this.height() > scroll) {
                        // Remove all classes on body with color-
                        $body.removeClass(function (index, css) {
                            return (css.match (/(^|\s)color-\S+/g) || []).join(' ');
                        });

                        // Add class of currently active div
                        $body.addClass('color-' + $(this).data('color'));
                    }
                });
            }).scroll();
        });
    </script>
</body>
</html>

你把这两个问题修复后，再打开本地文件试试，滚动背景变色的效果应该就能正常工作啦！

备注：内容来源于stack exchange，提问作者user1429138