Bootstrap 5 中的 Scrollspy 导航栏答案

【问题标题】：Scrollspy navbar in Bootstrap 5Bootstrap 5 中的 Scrollspy 导航栏
【发布时间】：2021-01-17 04:53:12
【问题描述】：

我正在尝试制作一个导航栏，当用户向下滚动页面时，它会将特定导航栏链接的样式更改为 active。我正在尝试使用 Bootstrap 的 scrollspy 功能来做到这一点。

我查了一下，有很多关于此的可理解的教程（例如https://www.w3schools.com/bootstrap/bootstrap_scrollspy.asp 或https://mdbootstrap.com/docs/standard/navigation/scrollspy/#example-3）。

虽然我相信我已经完全按照他们的要求进行操作，但效果似乎并不奏效。由于 BS5 放弃了 JQuery，我担心这可能与 spyscroll 功能机制的变化有关。但这很可能是由于我的代码中的错误，尽管我已尽力按照教程进行操作。

我的代码：

(a) 包含的外部文件：

<link rel="stylesheet" href="BS5/css/bootstrap.min.css" />
<link href="https://fonts.googleapis.com/css2?family=Ubuntu&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="BS5/css/styles.css" /> <!-- BS customising css -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="BS5/js/bootstrap.js"></script>
<script src="BS5/js/jsko.js"></script> <!-- non related custom scripts -->

(b) 样式标签

<style>
 body 
 {
   position: relative;
 }
</style>

<body data-spy="scroll"  data-target="#navbarko">

(d) 导航栏标签

<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top nav-larger" id="navbarko">
 <div class="container">
  <a class="navbar-brand" href="#"><img src="logo.png"/></a>
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse justify-content-end" id="navbarNav">
            <ul class="navbar-nav">
              <li class="nav-item">
                <a class="nav-link active" aria-current="page" href="#home">Home</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#mission">Our mission</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#debt">Debt</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#finadv">Finland</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#references">References</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#contact">Contact</a>
              </li>
            </ul>
          </div>
        </div>
      </nav>

(e) 整个页面的部分标签的开头：

<section class="feature grad_third" id="mission">

<section class="feature grad_third" id="debt">

<section class="feature grad_third" id="finadv">

<section class="companies references" id="references">

<section class="feature grad_third" id="contact">

非常感谢您的宝贵时间和帮助。

【问题讨论】：

看看你是否遇到了这里描述的同样的问题：github.com/twbs/bootstrap/issues/32496

标签： html twitter-bootstrap navbar

【解决方案1】：

Bootstrap 5 中的情况略有变化 - W3Schools 教程是 Bootstrap 4。

所以你需要将你的body标签更改为（注意'bs'，用于Bootstrap）：-

data-bs-spy="scroll"

更多信息在这里：- https://getbootstrap.com/docs/5.0/migration/#javascript

所有 JavaScript 插件的数据属性现在都已命名空间以提供帮助将 Bootstrap 功能与第三方和您自己的功能区分开来代码。例如，我们使用 data-bs-toggle 而不是 data-toggle。

【讨论】：