如何实现双position sticky元素无额外滚动条的滚动效果

核心思路是取消右侧内容容器的overflow-y: scroll，将滚动逻辑交还给浏览器主滚动条，同时通过布局调整让粉色HOME区域保持固定效果。

具体修改步骤 #

1. 调整CSS样式 #

修正sticky元素的定位参数，确保布局适配视口，同时移除多余的滚动容器设置：

* {
  margin: 0px;
  padding: 0px;
}
.first {
  height: 10vh;
  background: orange;
  position: sticky;
  top: 0;
  z-index: 100; /* 确保导航栏在最上层 */
}

.second {
  height: calc(100vh - 10vh); /* 视口高度减去导航栏高度 */
  background: pink;
  position: sticky;
  top: 10vh; /* 紧贴导航栏下方固定 */
  width: 25%; /* 对应原布局1:3的宽度比例 */
  position: fixed; /* 改为fixed实现完全固定，避免sticky的滚动触发问题 */
  right: auto;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

section {
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}
ul {
  text-align: center;
  color: white;
  flex-direction: column;
  list-style-type: none;
}
li {
  font-size: 2rem;
}
.content-area {
  margin-left: 25%; /* 给固定的HOME栏留出宽度 */
}

2. 调整HTML结构 #

将右侧滚动内容从独立滚动容器中移出，直接放入页面流，利用浏览器主滚动条：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style>
      /* 这里可以直接放入上面的CSS代码，或单独引入样式文件 */
    </style>
</head>
<body>
<section style="height: 90vh; font-size: 2rem; background: purple;">
    <h1>THIS IS A TITLE</h1>
</section>
<section class="first">
    <h1>THIS IS A NAV LIST</h1>
</section>

<section style="height: 90vh; font-size: 2rem; background: cornflowerblue;">
    THIS IS A CONTENT 1
</section>

<!-- 固定的HOME区域 -->
<div class="second">
    <ul>
        <li>HOME</li>
        <li>ABOUT</li>
        <li>PAGE</li>
        <li>LOGIN</li>
    </ul>
</div>

<!-- 右侧滚动内容，使用浏览器主滚动条 -->
<div class="content-area">
    <section style="height: 100vh; font-size: 2rem; background: green;">
        THIS IS A CONTENT 2
    </section>
    <section style="height: 100vh; font-size: 2rem; background: skyblue;">
        THIS IS A CONTENT 3
    </section>
    <section style="height: 100vh; font-size: 2rem; background: brown;">
        THIS IS A CONTENT 4
    </section>
    <section style="height: 100vh; font-size: 2rem; background: violet;">
        THIS IS A CONTENT 5
    </section>
</div>
</body>
</html>

逻辑说明 #

• 橙色导航栏通过position: sticky实现滚动到顶部后固定
• 粉色HOME区域改用position: fixed实现完全固定，避免sticky元素随页面滚动触发的位置偏移
• 右侧内容通过margin-left给固定栏留出空间，直接跟随浏览器主滚动条滚动，彻底消除额外滚动条

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