Bootstrap 3 Scrollspy问题求助：默认打开页面时高亮About项

我之前也碰到过这个Scrollspy的小坑——页面刚加载没滚动的时候，第一个导航项就是不自动激活对吧？其实是因为Scrollspy默认只会在滚动事件触发时才检测视口位置，页面初始化时不会主动执行一次检查。下面给你几个靠谱的解决办法：

方法1：页面加载后手动触发Scrollspy刷新 #

这是最直接的方案，在页面加载完成后调用Scrollspy的refresh方法，让它重新计算并激活当前视口对应的导航项。

首先确保你的HTML结构是正确的（这是前提！）：

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  <style>
    body {
      position: relative; /* 这个必须加！Scrollspy依赖body的相对定位 */
    }
    #about {
      padding-top: 50px; /* 避免导航栏遮挡内容 */
      height: 500px; /* 给区域足够高度方便测试 */
    }
    /* 其他区域样式... */
  </style>
</head>
<body data-spy="scroll" data-target=".navbar" data-offset="50">

<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>                        
      </button>
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <div>
      <div class="collapse navbar-collapse" id="myNavbar">
        <ul class="nav navbar-nav">
          <li><a href="#about">About</a></li>
          <li><a href="#services">Services</a></li>
          <li><a href="#contact">Contact</a></li>
        </ul>
      </div>
    </div>
  </div>
</nav>    

<div id="about" class="container-fluid">
  <h1>About</h1>
  <p>Some text about who we are and what we do.</p>
</div>
<!-- 其他区域... -->

<script>
$(document).ready(function(){
  // 初始化后手动触发refresh
  $('body').scrollspy('refresh');
  
  // 或者也可以手动触发一次滚动事件，间接让Scrollspy检测
  // $(window).trigger('scroll');
});
</script>

</body>
</html>

方法2：直接给“About”项添加激活类（兜底方案） #

如果上面的方法偶尔失效，你可以在页面加载时直接给About的<li>标签加上active类，同时确保Scrollspy后续滚动时能正确切换：

<!-- 修改导航项，默认加上active类 -->
<ul class="nav navbar-nav">
  <li class="active"><a href="#about">About</a></li>
  <li><a href="#services">Services</a></li>
  <li><a href="#contact">Contact</a></li>
</ul>

然后配合方法1的scrollspy('refresh')，这样既保证初始状态正确，后续滚动也不会出问题。

关键注意事项 #

• 必须给<body>设置position: relative;，Scrollspy依赖这个定位来计算滚动位置。
• data-offset属性要设置合理，避免导航栏固定在顶部时，内容被遮挡导致激活时机不对。
• 导航项的href必须和目标区域的id完全匹配，大小写也要一致！

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