实现首屏沉浸式滚动覆盖的交互效果

平时找网站模仿练习前端时，我发现有些网站的首屏下拉有内容层的滚动覆盖的交互效果，给人一种全屏视觉的沉浸感，配合滚动触发的顺滑过渡和内容层自然衔接，看起来就很爽，于是我就研究了一下怎么实现的，其实简单的css和js就可以实现。

首先肯定要给首屏固定住，css代码如下:

header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    transition: transform 0.3s ease-out;
}
body {
    padding-top: 100vh; /* 抵消fixed布局的偏移 */
}

需要注意的是，需要给body施加 padding-top属性以抵消fixed的固定布局，这个很常规了，稍微注意下即可。

其次是控制层级，将页面分为首屏和内容屏，使用z-index属性使得内容层层级高于首屏层级即可，避免无法正确覆盖。

接下来就是关键的js交互，其实很简单就是监听scroll事件，获取滚动距离，控制首屏透明度和内容层视差滚动；无需复杂逻辑，仅通过translateY实现元素位移即可，js代码如下：

window.addEventListener("scroll", () => {
    const scrollY = window.scrollY;
    // 内容层视差滚动，增强沉浸感
    document.querySelector(".content-container").style.transform = `translateY(-${scrollY * 0.5}px)`;
    // 首屏随滚动逐渐隐藏
    document.querySelector("header").style.opacity = scrollY > 1000 ? 0 : 1;
});

需要注意的是，给header添加transform过渡属性，滚动时通过调整内容屏的translateY让内容层向上滑出视口，配合transition实现顺滑过渡，无视觉断层。当滚动高度超过内容层后可将首屏的透明度调整为0，注意调整内容屏的位移要用transform属性而不是控制相对定位位置，这样的好处是可以避免浏览器重绘，实现丝滑的无视觉断层的滚动效果。