如何实现类似指定网站首屏的重叠滚动效果？

我想要实现首屏视频与覆盖区块的重叠滚动效果，尝试了以下代码但未达到预期效果，需要帮助修正。

原始代码 #

HTML代码 #

<body>
    <div class="body-top">
        <div class="box-overlap">
            <div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto beatae excepturi expedita illum labore magni maiores obcaecati quaerat sunt ut. Asperiores, dolorum in natus neque non quaerat tenetur vero voluptatum?</div>
            <div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur dicta facere molestiae placeat possimus quaerat similique, tempore tenetur voluptate. Aliquid amet consequatur doloremque hic itaque labore nemo quod sapiente voluptatibus?</div>
        </div>
        <div class="box-1">
            <div class="box-inner">
            </div>
        </div>
    </div>
    <div class="box-2">
    </div>
    <script src="index.js"></script>
</body>

CSS代码 #

.body-top {
    background: black;
}

.box-overlap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: -50vh auto 0;
    background: rgba(0, 0, 0, 0.5);
    position: relative;
    min-height: 100vh;
    width: 100%;
}

.box-overlap .text {
    font-size: 30px;
    padding: 20px 500px;
}

.box-1 {
    display: flex;
    align-items: center;
    top: 0;
    margin: 0 auto;
    background: #66ffd1;
    max-width: 1920px;
    min-height: 100vh;
}

.box-2 {
    height: 100vh;
    width: 100vw;
    background: #f5d1ff;
}

.box-inner {
    display: flex;
    margin: 0 auto;
    background: #FF0000;
    max-width: 1700px;
    min-height: 700px;
    width: 100%;
}

修正方案 #

核心是通过固定定位实现视频容器的全屏占位，结合滚动事件监听调整覆盖区块的位置与层级，模拟目标效果：

修正后的HTML #

<body>
    <div class="body-top">
        <!-- 视频/背景容器 -->
        <div class="box-1">
            <div class="box-inner">
                <!-- 替换为你的视频元素，例如：<video src="your-video.mp4" autoplay muted loop></video> -->
            </div>
        </div>
        <!-- 滚动覆盖区块 -->
        <div class="box-overlap">
            <div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto beatae excepturi expedita illum labore magni maiores obcaecati quaerat sunt ut. Asperiores, dolorum in natus neque non quaerat tenetur vero voluptatum?</div>
            <div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur dicta facere molestiae placeat possimus quaerat similique, tempore tenetur voluptate. Aliquid amet consequatur doloremque hic itaque labore nemo quod sapiente voluptatibus?</div>
        </div>
    </div>
    <div class="box-2"></div>
    <script>
        const overlapEl = document.querySelector('.box-overlap');
        window.addEventListener('scroll', () => {
            // 获取滚动距离
            const scrollY = window.scrollY;
            // 计算覆盖区块的 translateY 值，实现跟随滚动的重叠效果
            const translateY = Math.min(scrollY * 0.8, window.innerHeight);
            overlapEl.style.transform = `translateY(${translateY}px)`;
            // 可选：滚动到一定位置后调整背景透明度
            if (scrollY > window.innerHeight * 0.5) {
                overlapEl.style.background = 'rgba(0,0,0,0.8)';
            } else {
                overlapEl.style.background = 'rgba(0,0,0,0.5)';
            }
        });
    </script>
</body>

修正后的CSS #

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

.body-top {
    position: relative;
    min-height: 200vh; /* 拉长容器，让滚动效果可见 */
}

/* 视频容器固定定位，占满首屏 */
.box-1 {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #66ffd1;
    z-index: 1;
}

.box-inner {
    width: 100%;
    max-width: 1700px;
    min-height: 700px;
    background: #ff0000;
    /* 如果是视频，添加以下样式：
    video {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    */
}

/* 覆盖区块初始在首屏上方，滚动时向下移动 */
.box-overlap {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    width: 100%;
    background: rgba(0, 0, 0, 0.5);
    transform: translateY(-100vh); /* 初始隐藏在视口上方 */
    transition: transform 0.1s ease-out; /* 平滑过渡 */
}

.box-overlap .text {
    font-size: 20px;
    color: #fff;
    padding: 20px 10%;
    max-width: 1200px;
    text-align: center;
}

.box-2 {
    height: 100vh;
    width: 100%;
    background: #f5d1ff;
    position: relative;
    z-index: 3;
}

关键说明 #

1. 定位调整：将视频容器设置为position: fixed，固定在视口首屏作为底层背景；覆盖区块初始通过transform: translateY(-100vh)隐藏在视口上方。
2. 滚动监听：通过JavaScript监听滚动事件，动态调整覆盖区块的translateY值，实现滚动时向下移动、与视频容器重叠的效果。
3. 层级管理：通过z-index确保覆盖区块在视频上方，后续内容区块在最上层。
4. 响应式优化：调整文本内边距为百分比，适配不同屏幕尺寸。

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