Bootstrap Scrollspy 问题：页面加载时无法高亮About导航项

Let's sort out this Scrollspy issue where your "About" navigation item only highlights after scrolling down, instead of being active right when the page loads. Here's the breakdown of what's likely causing it and how to fix it step by step:

1. Manually Add the active Class to Your "About" Nav Link #

Bootstrap Scrollspy relies on detecting scroll position to update active states, but it doesn't automatically set the initial active state on page load. So we need to manually add the active class to the "About" link to get that immediate highlight:

<nav id="your-navbar-id" class="navbar ...">
  <ul class="navbar-nav">
    <!-- Add 'active' here -->
    <li class="nav-item">
      <a class="nav-link active" href="#about">About</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#services">Services</a>
    </li>
    <!-- Other nav items -->
  </ul>
</nav>

This gives you the visual highlight right away, and Scrollspy will take over updating the active state as you scroll.

2. Adjust the Scrollspy Offset Setting #

By default, Bootstrap Scrollspy uses an offset of 10px—meaning it only triggers the active state when a section's top is within 10px of the viewport top. If your "About" section is at the very top (or you have a fixed navbar pushing content down), this offset might be causing the delay.

Option A: Use Data Attributes #

Add data-bs-offset to your <body> tag, setting it to match your fixed navbar height (if you have one) or 0 if there's no fixed navbar:

<!-- If you have a 56px tall fixed navbar -->
<body data-bs-spy="scroll" data-bs-target="#your-navbar-id" data-bs-offset="56">

<!-- If no fixed navbar -->
<body data-bs-spy="scroll" data-bs-target="#your-navbar-id" data-bs-offset="0">

Option B: Initialize via JavaScript #

If you prefer JS initialization, set the offset there:

const scrollSpy = new bootstrap.ScrollSpy(document.body, {
  target: '#your-navbar-id',
  offset: 56 // Match your navbar height or use 0
})

3. Refresh Scrollspy on Page Load #

Sometimes, dynamic content or delayed DOM rendering can throw off Scrollspy's initial calculations. To fix this, refresh Scrollspy once the page is fully loaded:

document.addEventListener('DOMContentLoaded', function() {
  const scrollSpyInstance = bootstrap.ScrollSpy.getInstance(document.body);
  if (scrollSpyInstance) {
    scrollSpyInstance.refresh();
  }
});

This forces Scrollspy to recalculate section positions and sync up with your manually set active class.

4. Verify Your "About" Section Position #

Double-check that your #about section isn't being pushed down by unintended margins or padding. If it is, Scrollspy won't detect it as being in the viewport initially. Fix any extra spacing with CSS:

#about {
  margin-top: 0;
  padding-top: 0;
}

Full Working Example #

Here's a complete code snippet putting all these fixes together:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Scrollspy Fix</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  <style>
    /* Padding to account for fixed navbar */
    body {
      padding-top: 56px;
    }
    .section {
      height: 100vh;
      padding: 2rem;
    }
  </style>
</head>
<body data-bs-spy="scroll" data-bs-target="#main-navbar" data-bs-offset="56">

<nav id="main-navbar" class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
  <div class="container-fluid">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link active" href="#about">About</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#services">Services</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#contact">Contact</a>
      </li>
    </ul>
  </div>
</nav>

<div id="about" class="section bg-primary text-white">
  <h1>About Section</h1>
  <p>Now "About" is active as soon as the page loads!</p>
</div>

<div id="services" class="section bg-secondary text-white">
  <h1>Services Section</h1>
</div>

<div id="contact" class="section bg-dark text-white">
  <h1>Contact Section</h1>
</div>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    const scrollSpy = bootstrap.ScrollSpy.getInstance(document.body);
    if (scrollSpy) {
      scrollSpy.refresh();
    }
  });
</script>

</body>
</html>

These steps should ensure your "About" nav item is highlighted the moment the page loads, no scrolling required.

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