Bootstrap 滚动监听学习笔记

什么是滚动监听？

Bootstrap 的滚动监听是一种功能，它能够为你的网站添加一个动态的导航栏。当用户在页面上向下滚动时，导航栏会自动更新高亮显示当前所在的部分。

如何实现滚动监听？

要使用 Bootstrap 实现滚动监听，你需要完成以下步骤：

1. 包含必要的 JavaScript 库文件。

   Copy Code
   <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
   <script src="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.1.0/js/bootstrap.bundle.min.js"></script>
   

2. 在 HTML 页面中添加导航栏。

   Copy Code
   <nav class="navbar navbar-expand-lg navbar-light bg-light">
     <div class="container-fluid">
       <a class="navbar-brand" href="#">Navbar</a>
       <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
         <span class="navbar-toggler-icon"></span>
       </button>
       <div class="collapse navbar-collapse" id="navbarNav">
         <ul class="navbar-nav">
           <li class="nav-item">
             <a class="nav-link active" aria-current="page" href="#section1">Section 1</a>
           </li>
           <li class="nav-item">
             <a class="nav-link" href="#section2">Section 2</a>
           </li>
           <li class="nav-item">
             <a class="nav-link" href="#section3">Section 3</a>
           </li>
         </ul>
       </div>
     </div>
   </nav>
   

3. 在对应的页面内容中添加 id 属性。

   Copy Code
   <div id="section1" class="container-fluid">
     <h1>Section 1</h1>
     <p>...</p>
   </div>
   
   <div id="section2" class="container-fluid">
     <h1>Section 2</h1>
     <p>...</p>
   </div>
   
   <div id="section3" class="container-fluid">
     <h1>Section 3</h1>
     <p>...</p>
   </div>
   

4. 使用 JavaScript 库文件来启用滚动监听功能。

   Copy Code
   <script>
     $(document).ready(function(){
       $('body').scrollspy({target: ".navbar", offset: 50});
   
       $("#navbarNav a").on('click', function(event) {
         if (this.hash !== "") {
           event.preventDefault();
   
           var hash = this.hash;
   
           $('html, body').animate({
             scrollTop: $(hash).offset().top
           }, 800, function(){
             window.location.hash = hash;
           });
         }
       });
     });
   </script>
   

示例

下面是一个实现了滚动监听的网页示例：Bootstrap Scroll Spy Example

你可以尝试在该网页上向下滚动，并观察导航栏的变化。