只需要使用两个div，一个作为侧栏，一个作为内容，使用css确定位置和大小就可以了
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>侧边栏</title>
<style>
/*样式 */
body {
background-color: black;
font-size: 20px;
margin-left: 0;
color: rgb(245, 245, 242);
}
/* 侧栏样式 */
.sidebar {
/*边框粗细 样式和颜色*/
border:2px solid rgb(42,53,76);
/*边框圆角*/
border-radius: 10px;
/*宽高*/
width: 13vw;
height: 96vh;
/*背景色*/
background-color:rgba(58, 58,58, 0.5);
/*fixed位置能让侧栏保持不滚动*/
position: fixed;
/*起始位置*/
top: 2vh;
left: 0.5vw;
/*与容器左右边距*/
padding-left: 1vw;
padding-right: 1vw;
}
/*侧栏链接样式*/
.sidebar-link {
/*让作为块级元素显示，并且占据宽度90%*/
display: inline-block;
width: 90%;
/*颜色*/
color: rgb(255,255,255);
/* 取消链接的下划线 */
text-decoration: none;
padding: 5px;
/*圆角*/
border-radius: 5px;
/*使用transition属性来定义背景颜色的过渡效果*/
transition: background-color 0.3s ease-in-out;
}
/*链接背景颜色*/
.link-color {
/*background-color: rgb(33,166,117);*/
}
/*定义鼠标覆盖时链接背景颜色*/
.sidebar-link:hover {
background-color: rgb(10,149,132);
}
/*页面内容*/
.content {
position: absolute;
margin-left: 17vw; /* 与左侧的距离 */
margin-right: 2vw;
}
</style>
</head>
<body>
<!--侧边栏-->
<div class="sidebar">
<details>
<summary style="color:rgb(154,180,245)">列表</summary>
<ul>
<li><a href="#" class="sidebar-link link-color">列表1</a></li>
<li><a href="#" class="sidebar-link link-color">列表2</a></li>
<li><a href="#" class="sidebar-link link-color">列表3</a></li>
</ul>
</details>
<p><a href="#" class="sidebar-link link-color">菜单1</a></p>
<p><a href="#" class="sidebar-link link-color">菜单2</a></p>
<p><a href="#" class="sidebar-link link-color">菜单3</a></p>
<p><a href="#" class="sidebar-link link-color">菜单4</a></p>
<p><a href="#" class="sidebar-link link-color">菜单5</a></p>
<p><a href="#" class="sidebar-link link-color">菜单6</a></p>
<p><a href="#" class="sidebar-link link-color">菜单7</a></p>
</div>
<!--内容-->
<div class="content">
<h1 style="text-align: center;">欢迎来到我的网页</h1>
<h2>标题</h2>
<p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
<p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
<h2>标题</h2>
<p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
<ul>
<li>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</li>
<li>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</li>
<li>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</li>
<li>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</li>
</ul>
<h2>标题</h2>
<p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
<h2>标题</h2>
<p style="color:rgb(23,165,234)">内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
<p style="color:rgb(23,165,234)">内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
<h2>标题</h2>
<p>
<a href="#" target="_blank">链接</a>
<a href="#" target="_blank">链接</a>
<a href="#" target="_blank">链接</a>
<a href="#" target="_blank">链接</a>
</p>
</div>
</body>
</html>
效果
在页面滚动的时候侧边栏位置不变
