如何实现类似background-attachment:fixed的固定位置文本？

完全没问题，你想要的这种文本固定、配合图片滚动的效果，和background-attachment: fixed的视觉逻辑异曲同工，我们可以通过CSS定位+简单的JavaScript来实现。下面给你一个完整的可运行示例，适配你的需求：

实现思路 #

• 把每张图片做成占满整个视口的区块，滚动页面时自然切换不同图片
• 文本容器使用position: fixed固定在屏幕的某个位置（比如左侧中间，你可以自己调整）
• 通过监听滚动位置，判断当前显示的是哪张图片，自动切换对应的文本内容

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>
    <!-- 固定的文本容器 -->
    <div class="fixed-text">
        <p id="current-text">这是第一张图片的对应文本</p>
    </div>

    <!-- 图片区块容器 -->
    <div class="image-container">
        <section class="image-section" data-text="这是第一张图片的对应文本">
            <img src="your-image-1.jpg" alt="图片1">
        </section>
        <section class="image-section" data-text="这是第二张图片的对应文本">
            <img src="your-image-2.jpg" alt="图片2">
        </section>
        <section class="image-section" data-text="这是第三张图片的对应文本">
            <img src="your-image-3.jpg" alt="图片3">
        </section>
        <section class="image-section" data-text="这是第四张图片的对应文本">
            <img src="your-image-4.jpg" alt="图片4">
        </section>
        <section class="image-section" data-text="这是第五张图片的对应文本">
            <img src="your-image-5.jpg" alt="图片5">
        </section>
    </div>

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

CSS 代码（styles.css） #

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

/* 固定文本容器 */
.fixed-text {
    position: fixed;
    top: 50%;
    left: 50px; /* 可自定义文本的水平位置 */
    transform: translateY(-50%);
    z-index: 999; /* 确保文本始终在图片上方 */
    background-color: rgba(255, 255, 255, 0.8);
    padding: 20px 30px;
    border-radius: 8px;
    font-size: 1.2rem;
    max-width: 300px;
}

/* 图片区块样式 */
.image-section {
    height: 100vh; /* 每个区块占满整个视口高度 */
    width: 100%;
    overflow: hidden;
}

.image-section img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 图片自适应容器，保持比例不拉伸 */
}

JavaScript 代码（script.js） #

const textElement = document.getElementById('current-text');
const sections = document.querySelectorAll('.image-section');

window.addEventListener('scroll', () => {
    // 获取当前视口中间位置的滚动坐标
    const scrollPosition = window.scrollY + window.innerHeight / 2;

    sections.forEach(section => {
        const sectionTop = section.offsetTop;
        const sectionBottom = sectionTop + section.offsetHeight;

        // 判断视口中间是否落在当前图片区块内
        if (scrollPosition >= sectionTop && scrollPosition < sectionBottom) {
            // 切换为当前区块对应的文本
            textElement.textContent = section.dataset.text;
        }
    });
});

关键细节说明 #

1. 固定文本的核心：position: fixed让文本脱离文档流，固定在视口的指定位置，transform: translateY(-50%)是为了让文本垂直居中显示。
2. 图片区块布局：每个section设置height: 100vh，确保每张图片占满整个屏幕，滚动时自然切换不同图片。
3. 文本切换逻辑：通过监听scroll事件，计算当前视口中间位置对应的图片区块，从区块的data-text属性中获取对应文本并实时更新。

如果你不需要动态切换文本，只是每张图片对应固定位置的专属文本（比如每个区块的文本都固定在同一位置，但仅当前可见区块的文本显示），也可以用纯CSS实现，但上面的动态切换方式更灵活，完美适配你5张图对应不同文本的需求。

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