带有粘性侧边栏和滚动驱动内容切换的分割布局，常用于文档站、产品介绍页等场景，能让用户在滚动浏览内容时始终保持侧边导航可见，同时根据滚动位置自动高亮对应导航项，提升操作体验。
一、HTML基础结构搭建
首先我们需要搭建分割布局的基础HTML结构，左侧为粘性侧边栏，右侧为滚动内容区域，每个内容区块对应侧边栏的一个导航项。
<div class="split-layout">
<!-- 左侧粘性侧边栏 -->
<aside class="sticky-sidebar">
<ul class="sidebar-nav">
<li class="nav-item active" data-target="section1">第一章 布局介绍</li>
<li class="nav-item" data-target="section2">第二章 样式设置</li>
<li class="nav-item" data-target="section3">第三章 交互逻辑</li>
<li class="nav-item" data-target="section4">第四章 兼容优化</li>
</ul>
</aside>
<!-- 右侧滚动内容区域 -->
<main class="scroll-content">
<section id="section1" class="content-section">
<h3>第一章 布局介绍</h3>
<p>本章主要讲解分割布局的基本结构组成，以及各部分的职责划分。</p>
</section>
<section id="section2" class="content-section">
<h3>第二章 样式设置</h3>
<p>本章讲解如何通过CSS设置分割布局的宽高、定位等基础样式。</p>
</section>
<section id="section3" class="content-section">
<h3>第三章 交互逻辑</h3>
<p>本章讲解滚动驱动内容切换的实现逻辑和代码编写。</p>
</section>
<section id="section4" class="content-section">
<h3>第四章 兼容优化</h3>
<p>本章讲解布局在不同浏览器下的兼容处理方案。</p>
</section>
</main>
</div>
二、CSS样式配置
接下来编写CSS样式，实现分割布局的基础样式，以及侧边栏的粘性定位效果。
2.1 基础布局样式
设置外层容器为flex布局，让侧边栏和内容区域横向排列，同时给内容区域设置滚动属性。
/* 外层分割布局容器 */
.split-layout {
display: flex;
width: 100%;
min-height: 100vh;
}
/* 粘性侧边栏样式 */
.sticky-sidebar {
width: 240px;
background-color: #f5f7fa;
padding: 20px 0;
/* 粘性定位，滚动时固定在视口顶部 */
position: sticky;
top: 0;
height: 100vh;
overflow-y: auto;
}
/* 侧边栏导航列表 */
.sidebar-nav {
list-style: none;
padding: 0;
margin: 0;
}
.nav-item {
padding: 12px 24px;
cursor: pointer;
color: #333;
transition: all 0.2s;
}
.nav-item:hover {
background-color: #e8ecf1;
}
/* 激活状态的导航项 */
.nav-item.active {
color: #1677ff;
background-color: #e6f4ff;
border-right: 3px solid #1677ff;
}
/* 右侧滚动内容区域 */
.scroll-content {
flex: 1;
padding: 32px;
overflow-y: auto;
height: 100vh;
}
/* 内容区块样式 */
.content-section {
margin-bottom: 60px;
padding-bottom: 40px;
border-bottom: 1px solid #eee;
}
.content-section h3 {
margin-top: 0;
color: #1d2129;
}
.content-section p {
line-height: 1.8;
color: #4e5969;
}
2.2 粘性定位说明
这里使用position: sticky实现侧边栏的粘性效果，该属性会在元素滚动到设定的top值位置时，从相对定位切换为固定定位，不需要额外编写JavaScript控制定位逻辑。需要注意的是，粘性定位的父容器不能有overflow: hidden属性，否则会导致粘性效果失效。
三、滚动驱动内容切换逻辑
接下来编写JavaScript代码，监听内容区域的滚动事件，根据当前滚动位置高亮对应的侧边栏导航项，同时点击导航项可以跳转到对应的内容区块。
3.1 滚动监听实现
通过获取每个内容区块距离容器顶部的偏移量，判断当前滚动位置处于哪个区块范围内，从而切换导航项的激活状态。
// 获取所有导航项和内容区块
const navItems = document.querySelectorAll('.nav-item');
const contentSections = document.querySelectorAll('.content-section');
const scrollContent = document.querySelector('.scroll-content');
// 滚动事件处理函数
function handleScroll() {
// 获取当前内容区域的滚动距离
const scrollTop = scrollContent.scrollTop;
// 遍历所有内容区块，判断当前滚动位置对应的区块
let currentActiveIndex = 0;
contentSections.forEach((section, index) => {
// 获取区块距离内容区域顶部的偏移量
const sectionTop = section.offsetTop - scrollContent.offsetTop;
// 如果滚动距离超过区块顶部，说明当前处于该区块
if (scrollTop >= sectionTop - 100) {
currentActiveIndex = index;
}
});
// 移除所有导航项的激活类
navItems.forEach(item => {
item.classList.remove('active');
});
// 给当前对应的导航项添加激活类
navItems[currentActiveIndex].classList.add('active');
}
// 监听内容区域的滚动事件
scrollContent.addEventListener('scroll', handleScroll);
3.2 导航点击跳转逻辑
给侧边栏的导航项添加点击事件，点击时让对应的内容区块滚动到可视区域顶部。
// 给每个导航项添加点击事件
navItems.forEach(item => {
item.addEventListener('click', function() {
// 获取当前点击的导航项对应的目标区块id
const targetId = this.getAttribute('data-target');
const targetSection = document.getElementById(targetId);
if (targetSection) {
// 计算目标区块距离内容区域顶部的偏移量
const targetOffsetTop = targetSection.offsetTop - scrollContent.offsetTop;
// 平滑滚动到目标位置
scrollContent.scrollTo({
top: targetOffsetTop,
behavior: 'smooth'
});
}
});
});
四、兼容与优化建议
在实际使用中，还可以对布局做一些优化：如果侧边栏内容过多，可以设置侧边栏内部的滚动，避免侧边栏高度超过视口时出现内容截断；滚动监听可以使用节流函数优化，减少滚动事件的触发频率，提升性能；如果需要兼容不支持position: sticky的旧浏览器，可以用JavaScript模拟粘性定位效果，监听窗口滚动事件动态设置侧边栏的position属性。
注意：如果页面中存在其他滚动容器，需要确认粘性定位的父级容器是否正确，避免粘性效果失效。另外scroll-behavior: smooth属性可以让滚动更平滑，但部分旧浏览器不支持，需要做好兼容处理。五、完整效果验证
将上述HTML、CSS、JavaScript代码组合后，就可以得到完整的带有粘性侧边栏和滚动驱动内容切换的分割布局。用户可以滚动右侧内容区域，左侧导航会自动高亮当前浏览的章节，点击左侧导航也会平滑跳转到对应的内容区块，交互体验流畅自然。
粘性侧边栏滚动驱动内容切换分割布局CSS_position修改时间：2026-07-08 03:06:33