如何使用jQuery实现页面滚动到指定位置时切换文本内容

你的代码有3个核心硬伤，对应修复即可正常运行：

• jQuery选择器写错：id属性选择器必须加#前缀，你写的$('image-content')是匹配名称为image-content的标签，根本选不到id为image-content的目标div，自然无法添加/移除类。
• 未加载jQuery依赖：代码用了jQuery的$语法，但页面中没有引入jQuery库，脚本会直接报错终止运行，所有逻辑都不会执行。
• 伪元素缺少必填属性：CSS的::before伪元素必须设置content属性才会被浏览器渲染，你默认的伪元素样式没写content，就算类加上了内容也不会显示。另外你在伪元素样式里重复写了两次position属性，属于冗余代码，直接删掉重复项即可。

修正后代码 #

1. HTML部分 #

在自定义脚本前引入jQuery，同时补全缺失的html闭合标签：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="zoom.css">
    <!-- 引入jQuery库文件，本地存储或官方CDN均可，必须放在自己编写的脚本前面 -->
    <script src="path/to/jquery.min.js"></script>
</head>
<body>
    <div class="image-container">
        <div class="zoom main">
            <img src="images/sourcecode.jpg" class="main-image">
        </div>
        <div id="content-anchor"></div>
        <div id="image-content"></div>
    </div>
    <div class="filler"></div>
    <div class="main-text"></div>
    <!-- 建议把jQuery脚本放在body末尾，确保DOM加载完成再执行 -->
    <script>
        $(window).on('scroll', function() {
            let windowTop = $(window).scrollTop();
            // 缓存目标元素，避免每次滚动都重复查询DOM
            const $content = $('#image-content');
            if (windowTop < 800) {
                $content.addClass('scrolledDown').removeClass('scrolledUp');
            } else {
                $content.addClass('scrolledUp').removeClass('scrolledDown');
            }
        })
    </script>
</body>
</html>

2. CSS部分 #

给默认伪元素补上content属性，删除重复的position声明：

.main {
    width: 100%;
    height: 700px;
    overflow: hidden;
    position: relative;
}

.main-image {
    width: 100%;
    position: fixed;
    left: 50%;
    transform: translate(-50%) scale(500%);
}

.filler {
    height: 400vh;
}

.main-text {
    left: -14px;
    width: 99.3vw;
    height: 4000px;
    text-align: center;
    background-color: red;
    position: relative;
}

#image-content::before {
    white-space: pre;
    /* 删除重复的position: absolute，只保留需要的fixed定位 */
    position: fixed;
    bottom: 20px;
    left: 20px;
    font-family: Impact;
    font-size: 55px;
    font-weight: 550;
    color: white;
    z-index: 4;
    opacity: 1;
    /* 必须加默认content，伪元素才会被浏览器渲染 */
    content: '';
}

#image-content.scrolledDown::before {
    opacity: 1;
    content: 'ABC';
}

#image-content.scrolledUp::before {
    opacity: 1;
    content: "DEF";
}

补充优化建议：滚动事件触发频率很高，如果要追求更好的性能，可以给滚动逻辑加节流，或者用IntersectionObserver代替scroll监听判断滚动位置。

内容的提问来源于stack exchange，提问作者RMEM