不设置fixed属性，实现可调整宽度的侧边栏固定效果

方案一：使用CSS sticky 定位（推荐） #

这是最贴合需求的方案，sticky 兼具 relative 和 fixed 的特性：未滚动到阈值时保持 relative 布局（支持宽度调整），滚动到指定位置后自动切换为 fixed 固定效果。

实现步骤：

• 给侧边栏核心容器添加基础样式：

.sidebar {
  position: sticky;
  top: 0; /* 固定在视口顶部，可根据需求调整数值 */
  transition: width 0.3s ease; /* 宽度切换时添加平滑过渡 */
  min-height: 100vh; /* 确保侧边栏高度覆盖视口，避免滚动时提前脱离固定状态 */
}

• 通过CSS类控制宽度切换：

/* 展开状态 */
.sidebar.expanded {
  width: 280px;
}
/* 收起状态 */
.sidebar.collapsed {
  width: 80px;
}

• 点击按钮时通过JS切换类即可完成宽度调整，同时滚动时侧边栏会保持固定。

方案二：CSS变量 + Grid 布局 #

如果页面采用Grid布局，可以通过自定义CSS变量动态控制侧边栏宽度，结合sticky实现固定效果：

1. 页面容器设置Grid布局：

.page-container {
  display: grid;
  /* 使用CSS变量定义侧边栏宽度，默认280px */
  grid-template-columns: var(--sidebar-width, 280px) 1fr;
}

2. 侧边栏添加sticky属性：

.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
}

3. 通过JS修改CSS变量切换宽度：

// 展开侧边栏
document.documentElement.style.setProperty('--sidebar-width', '280px');
// 收起侧边栏
document.documentElement.style.setProperty('--sidebar-width', '80px');

注意事项 #

• 使用sticky时，父元素不能设置overflow: hidden，否则固定效果会失效；
• 确保侧边栏的高度足够（如100vh），避免内容过短时无法触发固定；
• 宽度切换的过渡效果可根据需求调整或移除。

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