引导程序4 |滚动式

有时在设计网站时，我们会包含一些吸引人的功能，这些功能使网站引人注目。功能之一是Bootstrap scrollspy，它在滚动区域时自动定位导航栏内容。

创建scrollspy： data-spy =“ scroll”和data-target =“。navbar”属性用于创建scrollspy元素。当滚动页面时，scrollspy用于更新导航链接。

例子：

 
 
 
    Scrollspy 
      
    
    
  
    
      
    
    
      
    
    
      
    
    
      
     
        body {
            position: relative; 
        }
    
 
  
 
      
    
          
        
            
                Home
            
                  
            
                Algo
            
                  
            
                DS
            
                  
            
                
                    Languages
                
                          
                
                    C
                    C++
                
             
        
    
      
    
        GeeksforGeeks
        A computer science portal for geeks
    
          
    
        Algorithm Analysis
        A stepwise procedure to solve a problem
    
          
    
        Data Structure
        
            Data structure is a perticular way to organizing the data
            in computer memory so that it can be used efficiently.
        
    
      
    
        C Languages
        
            C is a computer science programming language
        
    
      
    
        C++ Languages
        
            C++ is the extension of C language.
        
    
 
  
                    

输出：
Scrollspy垂直菜单：创建垂直导航菜单，并根据菜单显示内容。

 
 
 
    Scrollspy 
      
    
    
  
    
      
    
    
      
    
    
      
    
    
      
    
        body {
            position: relative;
        }
        ul.nav-pills {
            top: 20px;
            position: fixed;
        }
        div.col-8 div {
            height: 500px;
        }
    
 
  
 
      
    
        
              
            
          
                
                    
                        
                            Home
                        
                    
                          
                    
                        
                            Algo
                        
                    
                          
                    
                        
                            DS
                        
                    
                          
                    
                        
                            Languages
                        
                                  
                        
                            C
  
                            C++
                        
                     
                
            
      
            
                
                    GeeksforGeeks
                    A computer science portal for geeks
                
          
                
                    Algorithm Analysis
                    A stepwise procedure to solve a problem
                
                      
                
                    Data Structure
                    
                        Data structure is a perticular way to organizing
                        the data in computer memory so that it can be
                        used efficiently.
                    
                
                  
                
                    C Languages
                    
                        C is a computer science programming language
                    
                
                  
                
                    C++ Languages
                    
                        C++ is the extension of C language.
                    
                
            
        
    
 
  
                                

输出：