滚动页面时调整左侧垂直菜单位置的实现方案咨询

没问题，我来帮你搞定这个需求！你想要的效果是当页面滚动过顶部的水平栏后，左侧垂直菜单自动贴到屏幕顶部，就像W3Schools那样。咱们可以通过监听页面滚动事件，动态调整左侧菜单的top属性来实现，下面是具体的步骤和代码：

第一步：调整CSS样式 #

先给左侧菜单加个过渡动画，让位置变化更平滑，同时明确顶部栏的高度方便后续计算：

#menu {
  clear: both;
  overflow: hidden;
  padding: 6px;
  background-color: #c8df00;
  /* 明确顶部栏总高度：6px上下内边距 + 20px内容高度，总计32px */
  height: 32px; 
}

#menu a, #nav a {
  color: #22232D;
  text-decoration:none;
  padding: 10px 7px;
}

#menu a:hover {
  background-color: #22232D;
  color: #c8df00;
}

#nav {
  height: 100%;
  width: 215px;
  position: fixed;
  overflow-x: hidden;
  overflow-y: auto;
  background-color: #434758;
  text-decoration: none;
  top: 95px;
  /* 添加过渡动画，让位置切换更自然 */
  transition: top 0.3s ease;
}

#nav a {
  color: #22232D;
  border-left: 10px solid #22232D;
  display: block;
  padding: 0.8ex 2em 0.8ex 1em;
}

#nav ul, #nav li {
  padding: 0px;
  margin: 0px;
  list-style: none;
}

#nav ul {
  padding-top: 16px;
}

#nav a:hover {
  border-left: 10px solid #875fdf;
  background-color: #22232D;
  color: #875fdf;
}

#nav-current a {
  border-left: 10px solid #c8df00;
  color: #c8df00;
}

第二步：添加JavaScript代码 #

在HTML的</body>标签前插入这段代码，它会实时监听页面滚动状态，动态调整左侧菜单的位置：

<script>
// 获取顶部栏和左侧菜单的DOM元素
const menuBar = document.getElementById('menu');
const sidebarNav = document.getElementById('nav');

// 获取顶部栏的实际总高度（包含内边距、边框）
const menuBarTotalHeight = menuBar.offsetHeight;

// 监听页面滚动事件
window.addEventListener('scroll', function() {
  // 获取当前页面滚动的垂直距离
  const scrollDistance = window.pageYOffset || document.documentElement.scrollTop;
  
  // 判断滚动距离是否超过顶部栏高度，切换菜单位置
  if (scrollDistance > menuBarTotalHeight) {
    sidebarNav.style.top = '0';
  } else {
    sidebarNav.style.top = '95px';
  }
});
</script>

代码逻辑说明 #

1. offsetHeight：用来精准获取顶部栏的实际占用高度，确保我们能准确判断“滚动过顶部栏”的时机。
2. scroll事件监听：每次页面滚动都会触发这个函数，实时检查滚动位置并调整菜单样式。
3. transition过渡：给菜单添加0.3秒的平滑动画，避免位置切换时的突兀感。

现在替换掉原来的CSS并添加这段JS，就能实现你想要的滚动固定效果啦！

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