单页网站background-attachment:fixed背景图与position:fixed段落匹配显示问题咨询

嘿，这个需求我之前帮不少人搞定过，其实用Intersection Observer API就能完美解决——它比传统的滚动监听性能好太多，不会因为频繁触发scroll事件导致页面卡顿。下面给你一套完整的可运行代码，每部分都给你讲清楚逻辑：

1. HTML 结构 #

每个全屏区块对应一张背景图和一段专属文本，结构清晰易维护：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>滚动切换背景与文本</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <!-- 第1个全屏区块 -->
    <section class="page-section">
        <div class="bg-image" style="background-image: url('your-image-1.jpg')"></div>
        <div class="section-text">
            <h2>第一段文本标题</h2>
            <p>这是和第一张背景图绑定的内容，只有滚动到这个区域时才会显示~</p>
        </div>
    </section>

    <!-- 第2个全屏区块 -->
    <section class="page-section">
        <div class="bg-image" style="background-image: url('your-image-2.jpg')"></div>
        <div class="section-text">
            <h2>第二段文本标题</h2>
            <p>这是第二张背景图的专属内容，滚动到这里就会自动切换显示！</p>
        </div>
    </section>

    <!-- 第3-5个区块结构和上面一致，替换图片地址和文本即可 -->
    <section class="page-section">
        <div class="bg-image" style="background-image: url('your-image-3.jpg')"></div>
        <div class="section-text">
            <h2>第三段文本标题</h2>
            <p>第三张图的内容，切换是不是很顺滑？</p>
        </div>
    </section>

    <section class="page-section">
        <div class="bg-image" style="background-image: url('your-image-4.jpg')"></div>
        <div class="section-text">
            <h2>第四段文本标题</h2>
            <p>第四张图的专属内容，滚动切换毫无压力~</p>
        </div>
    </section>

    <section class="page-section">
        <div class="bg-image" style="background-image: url('your-image-5.jpg')"></div>
        <div class="section-text">
            <h2>第五段文本标题</h2>
            <p>最后一张图的内容，完美收官！</p>
        </div>
    </section>

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

2. CSS 样式 #

确保每个区块占满视口，文本默认隐藏，只有当前区块在视口内时才显示：

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 每个区块占满整个视口高度 */
.page-section {
    width: 100%;
    height: 100vh;
    position: relative;
    overflow: hidden;
}

/* 背景图全屏覆盖，保证显示效果 */
.bg-image {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* 文本容器默认透明隐藏，居中显示 */
.section-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: white;
    padding: 2rem;
    background-color: rgba(0, 0, 0, 0.7);
    border-radius: 8px;
    opacity: 0;
    transition: opacity 0.5s ease;
}

/* 当区块处于活动状态时，显示文本 */
.page-section.active .section-text {
    opacity: 1;
}

3. JavaScript 逻辑 #

用 Intersection Observer 监听区块的可见性，自动切换文本的显示状态：

// 获取所有全屏区块
const sections = document.querySelectorAll('.page-section');

// 配置监听参数：当区块有50%进入视口时触发逻辑
const observerOptions = {
    root: null, // 以浏览器视口作为监听的根容器
    rootMargin: '0px',
    threshold: 0.5
};

// 监听回调：处理区块进入/离开视口的逻辑
const observerCallback = (entries) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            // 先移除所有区块的active类，隐藏其他文本
            sections.forEach(section => section.classList.remove('active'));
            // 给当前进入视口的区块添加active类，显示对应文本
            entry.target.classList.add('active');
        }
    });
};

// 创建监听实例并开始监听所有区块
const observer = new IntersectionObserver(observerCallback, observerOptions);
sections.forEach(section => observer.observe(section));

关键说明 #

• 为什么用 Intersection Observer？ 它是浏览器原生提供的API，会自动监听元素的可见性变化，不需要手动监听scroll事件并计算位置，性能更优，代码也更简洁。
• 过渡动画：CSS里的transition: opacity 0.5s ease让文本显示/隐藏有平滑的过渡效果，不会显得突兀。
• 兼容性：现在主流浏览器（Chrome、Firefox、Edge、Safari 12.1+）都支持这个API，如果需要兼容极旧浏览器，可以用scroll事件作为降级方案，但一般没必要。

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