如何使用bootstrap滚动监控器-创新互联

…

导航条必须设置为顶部固定样式（navbar-fixed-top）

滚动监控器–JavaScript方法触发滚动监控器

在Bootstrap框架中，使用JavaScript方法触发滚动监控器相对来说较为简单，只需要指定两个容器的名称即可

 …



 …

JavaScript触发可以这样写：

$(function(){
  $("#scrollspy").scrollspy({
    target: "#navbar-menu"
  });
})

Bootstrap的滚动监控还提供了一个方法scrollspy(“refresh”)。当滚动监控所作用的DOM有增加或删除页面元素的操作时，需要调用下面的refresh方法：

$(function(){
  $("[data-spy='scroll']").each(function(){
    var $spy=$(this).scrollspy("refresh");
  })
})

注意的是，这种refresh方法只对声明式用法有效。另外滚动监控除了options参数“target”之外，还提供了一个offset参数，此参数默认值为10。默认情况下，滚动内容距离滚动容器10px以内的话，就高一片面前显示所对应的菜单项。

滚动监实例 ：

 

  
  
      

    

    
          
      
      
      
     

    
     导航标题
    

     
    

     
     
      
@fat
      
@mdo

      
       Dropdown 

       
        
one
        
two

         
        
        
three

       
      

     
     
    

   

    

  滚动监对象
  
   @fat
   
Ad leggings keytar,
   @mdo
   
Veniam marfa mustache skateboard
   one
   
Occaecat commodo aliqua delectus.
   two
   
In incididunt echo park, officia deserunt mcsweeney's 
   three
   
Ad leggings keytar
   
Keytar twee blog

  
 

看完上述内容，你们对如何使用bootstrap滚动监控器有进一步的了解吗？如果还想了解更多知识或者相关内容，请关注创新互联网站建设公司行业资讯频道，感谢大家的支持。

另外有需要云服务器可以了解下创新互联建站www.cdcxhl.com，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。