如何实现平滑滚动导航并根据用户浏览位置高亮对应导航项

云上老周

2026-9-26

实现滚动时导航自动高亮的方案

你可以直接在原有平滑滚动代码的基础上追加滚动监听逻辑即可，完整实现如下：

1. 补充current类高亮样式（如果还未定义）

aside li a.current {
  color: #ff4400;
  font-weight: bold;
  /* 可根据设计需求自行调整高亮样式 */
}

2. 替换原有jQuery代码

替换后的代码同时保留你原有的平滑滚动功能，新增了滚动时自动匹配当前区块并高亮导航的逻辑：

$(document).ready(function(){
  // 原有平滑滚动逻辑
  $('a[href^="#"]').bind('click.smoothscroll',function (e) {
    e.preventDefault();
    let target  = this.hash,
        $target = $(target);
    $('html, body').stop().animate({
      'scrollTop': $target.offset().top
    }, 900, 'swing', function () {
      window.location.hash = target;
    });
  });

  // 新增滚动导航高亮逻辑
  let scrollTimer = null;
  const $sections = $('#main h2');
  const $navLinks = $('aside li a');

  $(window).on('scroll', function() {
    // 节流处理，减少滚动事件触发频率，降低性能消耗
    if (scrollTimer) clearTimeout(scrollTimer);
    scrollTimer = setTimeout(() => {
      let scrollTop = $(window).scrollTop();
      // 倒序遍历区块，优先匹配可视区域内最靠下的区块，避免滚动到底部时高亮异常
      $($sections.get().reverse()).each(function() {
        // 这里的减100是偏移量，有固定头部的话可以改成头部的高度，匹配更精准
        if (scrollTop >= $(this).offset().top - 100) {
          let currentId = '#' + $(this).attr('id');
          $navLinks.removeClass('current');
          $navLinks.filter(`[href="${currentId}"]`).addClass('current');
          return false;
        }
      })
    }, 100);
  })
});