Bootstrap 中的滚动间谍是什么？

我们访问过许多网站，其中导航栏会随着用户向下滚动网页而自动更新。 Scrollspy 根据滚动位置或用户当前看到的位置工作。 Bootstrap scrollspy在滚动区域时自动定位导航栏内容。在本文中，我们将了解如何在 Bootstrap 中实现 scrollspy。我们将通过 2 种方式实现 scrollspy：

• 水平卷轴间谍
• 垂直卷轴间谍

我们需要导入 Bootstrap CDN 库来使用 scrollspy 功能。我们将包含来自官方引导网站的库。为了让 scrollspy 正常工作，有一些要求：

• 必须包含引导导航组件或列表组。
• 要求位置：相对：在应用间谍的元素上，通常在 body 标记中。
• 标签是必需的，它必须指向具有该 id 的元素。

实现水平滚动监视：我们将创建一个导航栏 在我们的身体中使用导航标签。导航栏将包含三个项目。我们将使用容器类 具有标题和一些虚拟文本，这将提供一些顶部填充以确保导航栏 和容器不相互重叠。导航栏应固定在顶部，以便 scrollspy 正常工作。

一些属性与用于实现此功能的元素一起添加到 body 标记中。

属性值：

• data-spy：用于监视用户滚动的当前位置。
• data-target：该属性用于连接导航栏和可滚动区域。
• data-offset：该属性指定计算滚动位置时从顶部偏移的像素数。

例子：

HTML

  

    
    
    
    
    
    
    
  
    
        .container {
            height: 500px;
            padding-top: 50px;
        }
  
        #java {
            background: lightblue;
        }
  
        #cpp {
            background: lightgreen;
        }
  
        #dsa {
            background: #ffcc66;
        }
    

  

      
    
        
            GeeksforGeeks
        
          
        
            Java
            C++
            DSA
        
    
    
        Java
        
            Java is a OOP programming language and
            GeeksforGeeks has great articles
            on it.
        
    
    
        C++
        
            C++ is a very popular programming language
            used by many developers and
            programmers around the world. It has
            wide range of applications from
            software to backend. I have learned
            C++ mostly from GeeksforGeeks
            because of the great content.
        
    
  
    
        DSA
        
            DSA or Data Structures and Algorithms are
            the most important aspects of
            programming and every good programmer
            should know DSA for better and
            efficient algorithms irrespective of
            programming language. You can find
            tons of lessons for DSA in GeeksforGeeks.
        
    

  

输出：

实现垂直scrollspy：对于垂直Scrollspy，我们需要一个垂直导航栏。我们已经将我们的内容包装在一行中，以便导航栏的垂直视图。

例子：

HTML

  

    
    
    
    
    
    
    
  
    
        body {
            position: relative;
        }
  
        .navbar-brand {
            position: fixed;
        }
  
        ul.nav-pills {
            top: 40px;
            position: fixed;
        }
  
        div.col-sm-9 div {
            height: 500px;
        }
  
        #java {
            background: lightblue;
        }
  
        #cpp {
            background: lightgreen;
        }
  
        #dsa {
            background: #ffcc66;
        }
  
        @media screen and (max-width: 810px) {
  
            #java,
            #cpp,
            #dsa {
                margin-left: 150px;
            }
        }
    

  

      
    
        
            
                GeeksforGeeks
                
                    
                        Java
                    
                    
                        C++
                    
                    
                        DSA
                    
                
            
            
                
                    Java
                    
                        Java is a OOP programming language
                        and GeeksforGeeks has great
                        articles on it.
                    
                
                
                    C++
                    
                        C++ is a very popular programming
                        language used by many developers
                        and programmers around the world.
                        It has wide range of applications 
                        from software to backend. I have 
                        learned C++ mostly from GeeksforGeeks
                        because of the great content."
                    
                
                
                    DSA
                    
                        DSA or Data Structures and Algorithms are
                        the most important aspects of programming
                        and every good programmer should know DSA
                        for better and efficient algorithms irrespective
                        of programming language. You can find tons of
                        lessons for DSA in GeeksforGeeks.
                    
                
            
        
    

  

输出：如果屏幕宽度小于 810px，我们提供了 150px 的边距。