我制作了 HTML 页面，左侧导航栏(垂直)，位置固定，所以当我向下滚动另一个 div(带文本的指南)时它不会移动， 在带有文本的 div 之后。 我试图让它响应，但由于它是固定位置，所以无济于事。 有什么技巧可以解决这个问题吗？ 示例(不像我的那样，因为它的代码很长，超过 200 行，带有 css 和所有内容) 但它仍然是相同的想法。 请注意，因为导航栏是固定位置，所以当屏幕像素下降时，它会隐藏引导 div
.sidenav {
height: 100%;
width: 260px;
position: fixed;
z-index: 1;
top: 140px;
left: 135px;
background: #eee;
overflow-x: hidden;
padding: 8px 0;
border-radius: 5px;
}
.sidenav a {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 22px;
color: #2b8bc6;
display: block;
}
.sidenav h3 {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 22px;
color: black;
display: block;
}
.box22 {
background-color: #fff;
max-width: 1000px;
margin: auto;
margin-top: 20px;
border-radius: 8px;
}<body>
<div class="sidenav">
<a href="#clients">HTML 1 editors</a>
<a href="#clients">HTML 2 editors</a>
<a href="#contact">HTML 3 editors</a>
</div>
<div class="box22">
<h1>HTML part 1 intro</h1>
<p>text</p>
</div>
</body>最佳答案
使用像 vw 这样的相对 CSS Unit，它相当于总视口(viewport)的 1%。
现在，您已将其设置为绝对大小 260px。将其更改为类似 10vw 的内容。
有关 CSS 单位的更多信息，包括相关单位列表，请查看此 W3 page .
.sidenav {
height: 100%;
width: 10vw;
position: fixed;
z-index: 1;
top: 140px;
left: -6px;
background: #eee;
overflow-x: hidden;
padding: 8px 0;
border-radius: 5px;
}
.sidenav a {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 22px;
color: #2b8bc6;
display: block;
}
.sidenav h3 {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 22px;
color: black;
display: block;
}
.box22 {
background-color: #fff;
max-width: 1000px;
margin: auto;
margin-top: 20px;
margin-left: 11vw;
border-radius: 8px;
}<body>
<div class="sidenav">
<a href="#clients">HTML 1 editors</a>
<a href="#clients">HTML 2 editors</a>
<a href="#contact">HTML 3 editors</a>
</div>
<div class="box22">
<h1>HTML part 1 intro</h1>
<p>text</p>
</div>
</body>关于css - HTML CSS 试图使固定的 sidenavbar 响应，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59290562/