如何实现跟随页面滚动的锚点导航侧边栏？

我懂你现在的困扰啦——原来的侧边栏用了固定定位，结果没法跟着页面一起滚动，但又得保留锚点跳转到页面内指定div的功能，对吧？别慌，咱们有两种靠谱的解决方案，先从最简单的CSS方法说起～

这是最省心的方案，现代浏览器都支持，不用写JS就能搞定。核心思路是把固定定位换成粘性定位，让侧边栏在滚动到指定位置后固定，之前则跟随页面滚动。

修改步骤： #

1. 去掉侧边栏的position: fixed样式，替换成position: sticky，再设置一个top值（比如top: 20px，表示侧边栏距离顶部20px时固定）。
2. 确保侧边栏的父容器没有设置overflow: hidden这类会影响粘性定位的属性。

修改后的完整代码示例： #

<!-- 侧边栏部分 -->
<div id="sidebar" style="position: sticky; top: 20px; width: 200px;">
  <ul>
    <li><a href="#d1">jQuery (animated)</a></li>
    <li><a href="#d2">CSS (fixed)</a></li>
    <li><a href="#d3">CSS (reveal)</a></li>
  </ul>
</div>

<!-- 页面内容区示例（对应锚点的div） -->
<div id="d1" style="height: 800px; padding: 20px;">
  <h2>jQuery (animated) 内容区</h2>
  <!-- 这里可以放你的具体内容 -->
</div>
<div id="d2" style="height: 800px; padding: 20px;">
  <h2>CSS (fixed) 内容区</h2>
  <!-- 这里可以放你的具体内容 -->
</div>
<div id="d3" style="height: 800px; padding: 20px;">
  <h2>CSS (reveal) 内容区</h2>
  <!-- 这里可以放你的具体内容 -->
</div>

这样设置后，侧边栏会跟着页面滚动，当滚动到距离顶部20px的位置时就会固定下来，完全不影响锚点跳转的功能～

如果需要兼容IE这类不支持粘性定位的旧浏览器，咱们可以用JS监听滚动事件，动态控制侧边栏的定位方式。

实现思路： #

1. 先记录侧边栏初始状态下距离页面顶部的位置。
2. 监听页面滚动事件，根据当前滚动距离判断：如果滚动距离超过侧边栏初始位置，就把它改成固定定位；否则恢复默认的静态定位。

完整代码示例： #

<!-- 侧边栏部分 -->
<div id="sidebar" style="width: 200px;">
  <ul>
    <li><a href="#d1">jQuery (animated)</a></li>
    <li><a href="#d2">CSS (fixed)</a></li>
    <li><a href="#d3">CSS (reveal)</a></li>
  </ul>
</div>

<!-- 页面内容区同上 -->

<script>
// 获取侧边栏元素
const sidebar = document.getElementById('sidebar');
// 记录侧边栏初始位置（距离页面顶部的距离）
const sidebarInitialTop = sidebar.offsetTop;

// 监听页面滚动事件
window.addEventListener('scroll', function() {
  // 获取当前页面滚动的垂直距离
  const currentScrollY = window.pageYOffset || document.documentElement.scrollTop;
  
  if (currentScrollY >= sidebarInitialTop) {
    // 滚动超过初始位置，固定侧边栏在顶部20px处
    sidebar.style.position = 'fixed';
    sidebar.style.top = '20px';
  } else {
    // 未超过初始位置，恢复默认定位，跟随页面滚动
    sidebar.style.position = 'static';
  }
});
</script>

额外注意点： #

• 锚点跳转的功能本身不需要修改，只要<a href="#xxx">对应的页面内元素有相同的id="xxx"，就能正常跳转到目标位置。
• 如果侧边栏有父容器，要确保父容器没有设置overflow: hidden或者高度限制，不然可能会影响侧边栏的跟随滚动效果。

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