单页下拉侧边栏：页面位置激活及自动平滑滚动展开收起方案问询

当然可以实现！这种单页导航的自动联动效果现在非常实用，我来给你拆解具体的实现步骤和代码示例：

1. 先搞定平滑滚动到指定区块 #

最简单的方式是用CSS全局开启平滑滚动，不需要额外JS：

html {
  scroll-behavior: smooth;
}

如果需要更精细的控制（比如自定义滚动速度），也可以用JS的scrollIntoView方法：

// 给导航链接绑定点击事件（如果需要主动触发滚动）
document.querySelectorAll('.nav-link').forEach(link => {
  link.addEventListener('click', (e) => {
    e.preventDefault();
    const targetId = link.getAttribute('href');
    document.querySelector(targetId).scrollIntoView({
      behavior: 'smooth',
      block: 'start' // 控制滚动到区块的位置
    });
  });
});

2. 滚动监听与导航项自动激活 #

我们需要监听页面滚动，判断当前视口内的内容区块，然后自动激活对应的导航项：

// 防抖函数，避免滚动事件频繁触发导致性能问题
function debounce(func, delay = 100) {
  let timeoutId;
  return (...args) => {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => func.apply(this, args), delay);
  };
}

// 判断元素是否进入视口（可根据需求调整触发阈值）
function isInViewport(element) {
  const rect = element.getBoundingClientRect();
  // 当元素进入视口中间区域时判定为活跃
  return rect.top <= window.innerHeight * 0.5 && rect.bottom >= window.innerHeight * 0.2;
}

// 更新导航激活状态的核心函数
function updateNavActiveState() {
  let currentActiveSection = null;
  
  // 遍历所有内容区块，找到当前视口内的目标
  document.querySelectorAll('main section').forEach(section => {
    if (isInViewport(section)) {
      currentActiveSection = section;
    }
  });

  if (!currentActiveSection) return;

  // 移除所有导航项的激活状态
  document.querySelectorAll('.nav-link').forEach(link => link.classList.remove('active'));
  
  // 给对应导航项添加激活类
  const targetLink = document.querySelector(`.nav-link[href="#${currentActiveSection.id}"]`);
  if (targetLink) targetLink.classList.add('active');
}

// 绑定滚动事件（应用防抖）
window.addEventListener('scroll', debounce(updateNavActiveState));
// 页面加载时初始化一次
window.addEventListener('load', updateNavActiveState);

3. 自动展开/收起Section1导航 #

基于上面的逻辑，我们只需要额外判断当前活跃区块是否属于Section1，就能控制导航的展开与收起：

// 补充到updateNavActiveState函数末尾
const section1NavItems = document.querySelector('#section1-nav .nav-items');
const isSection1Active = currentActiveSection.id.startsWith('section1-');

if (isSection1Active) {
  section1NavItems.classList.add('active');
} else {
  section1NavItems.classList.remove('active');
}

配套的HTML与CSS示例 #

<!-- 侧边栏结构 -->
<aside class="sidebar">
  <div class="nav-section" id="section1-nav">
    <h3 class="nav-title">Section 1</h3>
    <ul class="nav-items">
      <li><a href="#section1-part1" class="nav-link">Part 1</a></li>
      <li><a href="#section1-part2" class="nav-link">Part 2</a></li>
    </ul>
  </div>
  <div class="nav-section">
    <h3 class="nav-title">Section 2</h3>
    <ul class="nav-items">
      <li><a href="#section2" class="nav-link">Section 2 Content</a></li>
    </ul>
  </div>
</aside>

<!-- 页面内容区块 -->
<main>
  <section id="section1-part1" style="height: 800px; padding: 20px;">Section 1 Part 1 Content</section>
  <section id="section1-part2" style="height: 800px; padding: 20px;">Section 1 Part 2 Content</section>
  <section id="section2" style="height: 800px; padding: 20px;">Section 2 Content</section>
</main>

/* 侧边栏基础样式 */
.sidebar {
  position: fixed;
  top: 20px;
  left: 20px;
  width: 200px;
}

.nav-section {
  margin-bottom: 15px;
}

.nav-title {
  margin: 0;
  padding: 8px;
  background: #f0f0f0;
  cursor: pointer;
}

.nav-items {
  list-style: none;
  padding-left: 15px;
  margin: 5px 0;
  /* 默认收起Section1 */
  display: none;
  transition: all 0.3s ease;
}

.nav-items.active {
  display: block;
}

.nav-link {
  display: block;
  padding: 4px 0;
  text-decoration: none;
  color: #333;
}

.nav-link.active {
  color: #007bff;
  font-weight: bold;
}

一些优化建议 #

• 如果页面有固定顶部导航栏，需要在计算视口位置时减去导航栏的高度，避免激活位置偏差
• 可以给导航的展开/收起添加CSS过渡动画，让交互更流畅
• 对于高度特别小的区块，可以调整isInViewport的判断逻辑，确保不会跳过激活状态

内容的提问来源于stack exchange，提问作者J. Hradek