一聚教程网:一个值得你收藏的教程网站

最新下载

热门教程

Bootstrap Scrollspy源码学习

时间:2017-05-15 编辑:简简单单 来源:一聚教程网

本文实例为大家分享了Bootstrap Scrollspy插件的具体代码,供大家参考,具体内容如下

导航栏Scrollspy例子

 

 代码如下 复制代码

 

...

 

 

  • Section 1
  •  ...

     

     

    Section 1

     

    Try to scroll this page and look at the navigation bar while scrolling!

    ...

     

     

    垂直Scrolly例子

     

     代码如下 复制代码

     

     

     

      

      

       

  • Section 1
  •    ...

      

      

      

      

       

    Section 1

       

    Try to scroll this page and look at the navigation list while scrolling!

      

      ...

      

     

     

     

     

    Scrollspy的使用

    使用Scrollspy只需在对应的HTML元素里添加几个关键的属性:
    - data-spy=”scroll”
    添加到需要滚动的元素中,比如最常见的body元素,或者container。
    - data-target=”selector”
    添加到需要滚动的元素中,selector指示的是控制滚动的元素比如”.navbar”, “#myScrollspy”。
    - section
    在控制滚动的元素中用link链接到对应的位置。注意链接的id要跟对应位置元素的id相匹配。例如,