实现居中目录及粘性Div效果：滚动时在内容容器两端停驻

核心思路 #

• 以CSS position: sticky 为基础，结合父容器布局实现水平居中，通过top/bottom属性控制滚动时的停驻边界
• 利用父容器的高度限制，让目录在容器顶部和底部范围内跟随滚动，超出范围则固定在边界

CSS实现步骤 #

1. 搭建基础布局
   外层为内容容器，内部包含目录和正文模块，保证目录相对于容器定位：

   <div class="content-container">
     <div class="sticky-toc">
       <ul>
         <li><a href="#section1">章节1</a></li>
         <li><a href="#section2">章节2</a></li>
         <li><a href="#section3">章节3</a></li>
       </ul>
     </div>
     <div class="main-content">
       <!-- 正文内容 -->
     </div>
   </div>
   

2. 设置居中与粘性定位
   给内容容器设置居中宽度，目录通过margin: 0 auto实现水平居中，同时启用粘性定位：

   .content-container {
     max-width: 1200px;
     margin: 0 auto;
     display: flex; /* 若目录与正文并排，用flex布局 */
     gap: 2rem;
     min-height: 100vh;
   }
   
   .sticky-toc {
     position: sticky;
     top: 2rem; /* 距离容器顶部的停驻距离 */
     bottom: 2rem; /* 距离容器底部的停驻距离 */
     align-self: flex-start;
     width: 280px;
     margin: 0 auto; /* 水平居中 */
   }
   

   若目录单独占一行，无需flex布局，直接让.sticky-toc在.content-container内居中即可。

3. 控制停驻边界
   确保内容容器有足够高度，当页面滚动时，目录会在top和bottom定义的范围内跟随滚动；当容器底部即将离开视口时，目录会自动停驻在容器底部边界。

精细控制的JS辅助（可选） #

如果需要适配动态容器高度、调整停驻距离，可监听滚动事件做动态调整：

const toc = document.querySelector('.sticky-toc');
const container = document.querySelector('.content-container');

window.addEventListener('scroll', () => {
  const containerRect = container.getBoundingClientRect();
  const tocHeight = toc.offsetHeight;
  const viewportHeight = window.innerHeight;

  // 当容器底部即将超出视口时，动态调整toc的bottom值
  if (containerRect.bottom < viewportHeight + tocHeight) {
    toc.style.bottom = `${viewportHeight - containerRect.bottom + 20}px`;
  } else {
    toc.style.bottom = '2rem';
  }
});

注意事项 #

• 父容器不能设置overflow: hidden，否则position: sticky会失效
• 用媒体查询适配不同屏幕尺寸，调整目录宽度和间距
• 若目录高度超过视口，bottom属性会自动生效，保证滚动到容器底部时目录不会被截断

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