固定位置的html css侧边栏在移动视图中滚动时不应该

Question

我目前正在构建我的投资组合，在开发侧边栏和测试移动响应时，我遇到了一个小问题。

我有一个div作为侧边栏，它有一个固定的位置，顶部和左侧为0。在桌面视图中，它保持滚动状态，并按照我的预期工作。但是，通过inspect选项卡和mobile视图，侧边栏会随页面滚动。代码附在下面，在一个完美的世界里，我可以把侧边栏放在移动视图中应该放的地方。这是特定于移动视图的，如果您只将主窗口缩小到媒体查询宽度，它将按预期工作。谢谢

编辑：

我希望它看起来是什么样子：https://youtu.be/w3AT3WHHL4o

它看起来是什么样子：https://youtu.be/kbfS8vBKAlU

<div class="side-nav">
<a href="#home" class="logo">
<img class="logo-img" src="Images/Logo.png">
<img class="icon-img" src="Images/Icon.png">
</a>
<ul class="nav-links">
<li><a href="#about"><i class="fa-solid fa-user scrollLink"></i><p>About</p></a></li>
<li><a href="#projects"><i class="fa-solid fa-folder scrollLink"></i><p>Projects</p></a></li>
<li><a href="#resume"><i class="fa-solid fa-file scrollLink"></i><p>Resume</p></a></li>
<div class="active"></div>
</ul>
</div>

<style> 
.side-nav {
width:  250px;
height: 100vh;
background: #9E9E9E;
position: fixed;
top: 0;
left: 0;
padding: 20px 30px;
}
.logo {
display: block;
margin-bottom: 130px;
}
.logo-img {
display: block;
width: 190px;
}
.icon-img {
display: none;
}
.nav-links {
list-style: none;
position: relative;
}
.nav-links li {
padding: 10px 0;
}
.nav-links li a {
color: white;
text-decoration: none;
padding: 10px 14px;
display: flex;
align-items: center;
}
.nav-links li a i {
font-size: 22px;
margin-right: 20px;
}
.active {
background: white;
width: 100%;
height: 47px;
position: absolute;
left: 0;
top: 4%;
z-index: -1;
border-radius: 6px;
box-shadow: 0 5px 10px rgba(255, 255, 255, 0.4);
display: none;
transition: top 0.5s;
}
.nav-links li:hover a {
color: #9E9E9E;
transition: 0.3s;
}
.nav-links li:hover ~ .active {
display: block;
}
.nav-links li:nth-child(1):hover ~ .active{
top:  4%;
}
.nav-links li:nth-child(2):hover ~ .active{
top:  35.9%;
}
.nav-links li:nth-child(3):hover ~ .active{
top:  69.2%;
}
@media only screen and (max-width:  600px){
.side-nav {
width: 110px;
}
.nav-links li a p {
display: none;
}
.nav-links li a i {
margin-right: 0;
}
.nav-links li a {
justify-content: center;
}
.logo-img {
display: none;
}
.icon-img {
display: block;
}
}
</style>

Answer 1

我已经评论了我添加的内容。很抱歉，我无法解释，因为你的设置非常混乱；需要重构。

.side-nav {
width: 250px;
height: 100vh;
background: #9E9E9E;
position: fixed;
top: 0;
left: 0;
padding: 20px 30px;
}
.logo {
display: block;
margin-bottom: 130px;
}
.logo-img {
display: block;
width: 190px;
}
.icon-img {
display: none;
}
.nav-links {
list-style: none;
position: relative;
}
.nav-links li {
padding: 10px 0;
}
.nav-links li a {
color: white;
text-decoration: none;
padding: 10px 14px;
display: flex;
align-items: center;
}
.nav-links li a i {
font-size: 22px;
margin-right: 20px;
}
.active {
background: white;
width: 100%;
height: 47px;
position: absolute;
left: 0;
top: 4%;
z-index: -1;
border-radius: 6px;
box-shadow: 0 5px 10px rgba(255, 255, 255, 0.4);
display: none;
transition: top 0.5s;
}
.nav-links li:hover a {
color: #9E9E9E;
transition: 0.3s;
}
.nav-links li:hover~.active {
display: block;
}
.nav-links li:nth-child(1):hover~.active {
top: 4%;
}
.nav-links li:nth-child(2):hover~.active {
top: 35.9%;
}
.nav-links li:nth-child(3):hover~.active {
top: 69.2%;
}
@media only screen and (max-width: 600px) {
.side-nav {
width: 100px;
height: 70vh;
padding: 2px 3px;          /*i added*/
display: flex;               /*i added*/
flex-direction: column;        /*i added*/
align-items: space-between;   /*i added*/

}
.nav-links li a i {
font-size: 12px;       /*i added*/
margin-right: 0px; /*i added*/
}
.logo {
display: block;
margin-bottom: 30px;       /*i added*/
}
.nav-links li a p {
display: none;
}
.nav-links li a i {
margin-right: 0;
}
.nav-links li a {
justify-content: flex-start;       /*i added*/
}
.logo-img {
display: none;
}
.icon-img {
display: block;
}
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" rel="stylesheet" />
<div class="side-nav">
<a href="#home" class="logo">
<img class="logo-img" src="Images/Logo.png">
<img class="icon-img" src="Images/Icon.png">
</a>
<ul class="nav-links">
<li><a href="#about"><i class="fa-solid fa-user scrollLink"></i><p>About</p></a></li>
<li><a href="#projects"><i class="fa-solid fa-folder scrollLink"></i><p>Projects</p></a></li>
<li><a href="#resume"><i class="fa-solid fa-file scrollLink"></i><p>Resume</p></a></li>
<div class="active"></div>
</ul>
</div>