首页 > 文章 > 前端

CSS固定侧边栏滚动技巧

时间：2025-11-23 14:42:28 301浏览收藏

知识点掌握了，还需要不断练习才能熟练运用。下面golang学习网给大家带来一个文章开发实战，手把手教大家学习《CSS实现侧边栏固定滚动方法》，在实现功能的过程中也带大家重新温习相关知识点，温故而知新，回头看看说不定又有不一样的感悟！

使用 position: fixed 可实现侧边栏固定滚动，通过设置 top、left 或 right 使其固定在视窗左侧或右侧，配合 margin 或 flex 布局避免遮挡内容；也可用 position: sticky 实现限定范围的粘性定位，适合局部固定场景。

如何用css实现侧边栏固定滚动效果

要实现侧边栏固定滚动效果，也就是让侧边栏在页面滚动时保持在视窗的某个位置（通常是左侧或右侧），可以使用 CSS 中的 position: fixed 属性。下面详细介绍实现方法和常见场景。

1. 基础固定侧边栏

将侧边栏设置为固定定位，使其不随页面滚动而移动。

HTML 结构示例：

<div class="sidebar">
  <ul>
    <li>导航项 1</li>
    <li>导航项 2</li>
    <li>导航项 3</li>
  </ul>
</div>

CSS 样式：

.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: 200px;
  height: 100vh;
  background-color: #f4f4f4;
  padding: 20px;
  box-shadow: 2px 0 5px rgba(0,0,0,0.1);
}

这样侧边栏会固定在视窗左侧，即使页面向下滚动也不会移动。

2. 右侧固定侧边栏

如果想让侧边栏固定在右侧，只需调整 left 为 right。

.sidebar {
  position: fixed;
  top: 0;
  right: 0;
  width: 200px;
  height: 100vh;
  background-color: #f4f4f4;
  padding: 20px;
}

3. 设置滚动范围限制（可选）

有时希望侧边栏只在特定区域内“固定”，超出后恢复文档流，可以用 position: sticky 替代。

.sidebar {
  position: -webkit-sticky; /* 兼容 Safari */
  position: sticky;
  top: 10px; /* 距离顶部 10px 开始固定 */
  height: fit-content;
  padding: 20px;
  background: #f4f4f4;
}

sticky 定位会在滚动到设定的 top 值时变为固定，适合嵌入内容区的侧栏。

4. 避免遮挡内容

固定侧边栏可能覆盖主内容，需给主体内容添加相应边距或使用 flex 布局分离结构。

.container {
  display: flex;
}
<p>.sidebar {
width: 200px;
position: fixed;
top: 0;
left: 0;
height: 100vh;
}</p><p>.main-content {
margin-left: 220px; /<em> 留出侧边栏宽度 + 间距 </em>/
padding: 20px;
}
</p>

基本上就这些。使用 position: fixed 是最直接的方式，若需更自然的粘性效果可尝试 sticky。关键是合理布局，避免内容被遮挡。不复杂但容易忽略细节。

终于介绍完啦！小伙伴们，这篇关于《CSS固定侧边栏滚动技巧》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！