Bootstrap Scrollspy源码学习
本文实例为大家分享了BootstrapScrollspy插件的具体代码，供大家参考，具体内容如下
导航栏Scrollspy例子
<!--Thescrollablearea--> <bodydata-spy="scroll"data-target=".navbar"data-offset="50"> <!--Thenavbar-The<a>elementsareusedtojumptoasectioninthescrollablearea--> <navclass="navbarnavbar-inversenavbar-fixed-top"> ... <ulclass="navnavbar-nav"> <li><ahref="#section1"rel="externalnofollow"rel="externalnofollow">Section1</a></li> ... </nav> <!--Section1--> <divid="section1"> <h1>Section1</h1> <p>Trytoscrollthispageandlookatthenavigationbarwhilescrolling!</p> </div> ... </body>
垂直Scrollspy例子
<bodydata-spy="scroll"data-target="#myScrollspy"data-offset="20"> <divclass="container"> <divclass="row"> <navclass="col-sm-3"id="myScrollspy"> <ulclass="navnav-pillsnav-stacked"> <li><ahref="#section1"rel="externalnofollow"rel="externalnofollow">Section1</a></li> ... </ul> </nav> <divclass="col-sm-9"> <divid="section1"> <h1>Section1</h1> <p>Trytoscrollthispageandlookatthenavigationlistwhilescrolling!</p> </div> ... </div> </div> </div> </body>
Scrollspy的使用
使用Scrollspy只需在对应的HTML元素里添加几个关键的属性：
-data-spy=”scroll”
添加到需要滚动的元素中，比如最常见的body元素，或者container。
-data-target=”selector”
添加到需要滚动的元素中，selector指示的是控制滚动的元素比如”.navbar”,“#myScrollspy”。
-<ahref=”#section”>section</a>
在控制滚动的元素中用link链接到对应的位置。注意链接的id要跟对应位置元素的id相匹配。例如，<divid=”section1”>与<ahref=”#seciton1”。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。