概述与实现目标
在现代网页设计中，一种常见的交互模式是分屏滚动体验，用户在滚动页面时，屏幕的一侧内容（通常是文本或段落）会依次展现，而另一侧内容（通常是图片、视频或动画）则保持固定（粘性），并随着左侧滚动内容的进度而动态更新。这种效果常用于产品介绍或故事叙述型页面，能够有效地引导用户注意力并提升信息传达效率。本教程将指导您如何利用css构建基础的分屏粘性布局，并阐述如何通过javascript实现右侧粘性内容的动态切换。
核心布局：CSS实现分屏与粘性定位
实现这种布局的关键在于CSS的Flexbox或Grid布局，结合position: sticky属性。我们将创建一个主容器，内部包含两个子元素：一个用于滚动内容的“流动”区域，另一个用于粘性内容的“固定”区域。
HTML 结构
首先，定义清晰的HTML结构。建议使用语义化的类名来代替原始答案中的属性选择器，以提高可读性和维护性。
@@##@@ @@##@@ @@##@@这是第一段滚动内容。当用户滚动到这里时，右侧的图片将显示第一张。
这是第二段滚动内容。当用户滚动到这里时，右侧的图片将显示第二张。
这是第三段滚动内容。当用户滚动到这里时，右侧的图片将显示第三张。
...
底部滚动内容，用于提供后续滚动空间。
...
CSS 样式
接下来，应用CSS来构建分屏布局并实现粘性效果。
/* 主分屏容器 */
.main-split-section {
display: flex; /* 使用Flexbox创建分屏 */
min-height: 100vh; /* 确保容器至少占据一个视口高度 */
position: relative; /* 为 sticky 元素提供定位上下文 */
}
/* 粘性面板样式 */
.sticky-panel {
flex: 1; /* 占据可用空间的一半 */
position: sticky; /* 使元素在滚动时保持粘性 */
top: 0; /* 粘性元素吸附在视口顶部 */
height: 100vh; /* 粘性元素高度与视口高度一致 */
overflow: hidden; /* 隐藏超出容器的图片部分 */
/* background: salmon; /* 示例背景色 */
display: flex; /* 内部图片也可能需要flex布局 */
justify-content: center;
align-items: center;
}
.sticky-panel .sticky-image {
position: absolute; /* 使图片叠放 */
opacity: 0; /* 默认隐藏 */
transition: opacity 0.5s ease-in-out; /* 切换时的过渡效果 */
max-width: 90%; /* 限制图片大小 */
max-height: 90%;
object-fit: contain; /* 保持图片比例 */
}
.sticky-panel .sticky-image.active {
opacity: 1; /* 激活时显示 */
}
/* 流动面板样式 */
.flow-panel {
flex: 1; /* 占据可用空间的一半 */
/* background: slateblue; /* 示例背景色 */
padding: 20px; /* 增加内边距 */
box-sizing: border-box; /* 确保padding不增加宽度 */
}
/* 滚动内容段落样式 */
.flow-panel p {
height: 50vh; /* 每个段落占据半个视口高度，方便触发滚动事件 */
display: flex; /* 垂直居中内容 */
align-items: center;
justify-content: center;
text-align: center;
font-size: 1.5em;
margin: 0; /* 移除默认外边距 */
border-bottom: 1px solid #eee; /* 区分段落 */
}
/* 辅助滚动内容 */
.scroll-content-before,
.scroll-content-after {
height: 100vh; /* 提供足够的滚动空间 */
display: flex;
justify-content: center;
align-items: center;
background-color: #f8f8f8;
font-size: 1.2em;
color: #555;
}注意事项：
- Flexbox 布局： display: flex 在 main-split-section 上创建了一个弹性容器，flex: 1 使 sticky-panel 和 flow-panel 各占据一半的可用宽度。
- position: sticky： sticky-panel 设置 position: sticky; top: 0; height: 100vh; 会使其在父容器滚动时，当其顶部到达视口顶部时，开始固定在视口顶部，并占据整个视口高度。
- 对齐问题： 如果希望 flow-panel 和 sticky-panel 在视觉上从页面的同一水平线开始，并且 sticky-panel 的高度是固定的（例如 100vh），而 flow-panel 位于其下方，您可能需要为 flow-panel 设置一个负的 margin-top 值，其大小等于 sticky-panel 的高度。然而，在上述的Flexbox结构中，它们是并排的，所以通常不需要负外边距。如果您的布局结构是 sticky-panel 在 flow-panel 之前，并且 flow-panel 紧随其后，且希望 flow-panel 的内容能“滚动到” sticky-panel 旁边，则需要更复杂的布局，例如使用 grid 或调整 margin。本例中，它们是并列关系，无需额外处理。
- 内容高度： flow-panel 中的 p 标签设置了 height: 50vh，这使得每个段落都足够长，以便在滚动时能清晰地触发内容切换。整个 flow-panel 的总高度将由其内部内容的累加高度决定，这提供了足够的滚动空间。
动态内容切换：JavaScript 实现
CSS只负责布局和粘性效果，而右侧粘性面板内容的动态切换（例如图片淡入淡出）则需要JavaScript来完成。核心思路是监听滚动事件，判断当前滚动位置，并根据位置激活相应的粘性内容。
JavaScript 逻辑（概念性说明）
document.addEventListener('DOMContentLoaded', () => {
const flowPanel = document.querySelector('.flow-panel');
const stickyImages = document.querySelectorAll('.sticky-panel .sticky-image');
const scrollTriggers = document.querySelectorAll('.flow-panel .scroll-trigger');
// 初始化显示第一张图片
if (stickyImages.length > 0) {
stickyImages[0].classList.add('active');
}
// 使用 Intersection Observer 监听滚动触发点
const observerOptions = {
root: null, // 视口作为根
rootMargin: '0px 0px -50% 0px', // 当触发元素中心进入视口时触发
threshold: 0 // 元素进入视口即可触发
};
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
// 获取当前进入视口的触发段落的索引
const index = parseInt(entry.target.dataset.imageIndex);
// 移除所有图片的 active 类
stickyImages.forEach(img => img.classList.remove('active'));
// 激活对应索引的图片
if (stickyImages[index]) {
stickyImages[index].classList.add('active');
}
}
});
}, observerOptions);
// 观察每个滚动触发点
scrollTriggers.forEach(trigger => {
observer.observe(trigger);
});
});JavaScript 逻辑说明：
- 获取元素： 选中所有粘性图片 (.sticky-image) 和滚动触发段落 (.scroll-trigger)。
- 初始化： 默认显示第一张图片。
-
Intersection Observer： 这是实现滚动监听和内容切换的最佳实践。
- 它比传统的 scroll 事件监听更高效，因为它只在目标元素与根元素（这里是视口）交叉时触发回调，避免了频繁的计算。
- rootMargin: '0px 0px -50% 0px' 意味着当目标元素的中心点（或更精确地说，是目标元素顶部距离视口底部50%的位置）进入视口时，isIntersecting 会变为 true。您可以根据实际需求调整这个值。
- data-image-index 属性用于将每个滚动段落与其对应的粘性图片关联起来。
- 内容切换： 当一个 scroll-trigger 段落进入视口时，根据其 data-image-index 属性，移除所有图片的 active 类，然后为对应索引的图片添加 active 类，从而实现淡入淡出效果（通过CSS的 opacity 和 transition）。
总结与注意事项
通过上述CSS和JavaScript的结合，您可以成功创建一个具有粘性侧边栏和动态内容切换的分屏滚动体验。
- 结构清晰： 使用语义化的类名和合理的HTML结构，有助于代码的维护和理解。
- CSS 优化： 充分利用 flexbox 或 grid 进行布局，position: sticky 实现粘性效果。
- JavaScript 效率： 优先使用 Intersection Observer API 来监听滚动事件，而不是直接监听 scroll 事件，以避免性能问题。对于更复杂的动画，可以考虑使用 requestAnimationFrame。
- 响应式设计： 确保在不同屏幕尺寸下（特别是移动设备）布局依然良好。可能需要使用媒体查询调整分屏布局，例如在小屏幕上将分屏改为堆叠布局。
- 内容预加载： 如果粘性面板中的图片较多，考虑对图片进行预加载，以避免切换时的闪烁或延迟。
- 无障碍性： 为图片添加 alt 属性，确保屏幕阅读器用户也能理解内容。
这种分屏粘性布局不仅美观，而且能有效提升用户体验，是现代网页设计中值得掌握的技巧。
