学习Bootstrap滚动监听 附调用方法

本文为大家介绍Bootstrap滚动监听，供大家学习，具体内容如下

滚动监听 伴随着滚动条的滚动，列表项被不断切换激活

  
    
      
列表1
      
列表2
      
      

 
 下拉菜单
 

   
列表3
   
列表4
   
列表5
 
      
    
  





  
列表1
  

  
列表2
  

  
列表3
  

  
列表4
  

  
列表5
  

滚动监听

  

    
列表1
    
列表2
    

      下拉菜单 
      

 
列表3
 
列表4
 
列表5
      
    
  





  
列表1
  

  
列表2
  

  
列表3
  

  
列表4
  

  
列表5
  

CSS样式

#navbar {
  position: fixed;
  right: 10px;
  top: 50px;
  width: 200px;
  background-color: #fff;
}

调用：
第一种 ：使用 data-spy=”scroll”方法，上述就是
第二种 ：使用JS调用
HTML仅仅去掉data-spy=”scroll”

$(function () {
  $("body").scrollspy();
  // 当一个新导航条的项目被激活时触发
  $("body").on("activate", function (e) {
    if (e.target && $(e.target).hasClass("dropdown")){
      $(e.target).children("ul.dropdown-menu").css("display", "block");
    } else {
      $(e.target).parent().find("ul.dropdown-menu").css("display", "none");
    }
  })
});

如果大家还想深入学习，可以点击这里进行学习，再为大家附一个精彩的专题：Bootstrap学习教程

以上就是本文的全部内容，希望对大家学习javascript程序设计有所帮助。