微信小程序如何运营_Bootstrap Scrollspy源码学习

Bootstrap Scrollspy源码学习       这篇文章主要介绍了Bootstrap Scrollspy源码学习,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

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

导航栏Scrollspy例子

 !-- The scrollable area -- 
 body data-spy="scroll" data-target=".navbar" data-offset="50" 
 !-- The navbar - The a elements are used to jump to a section in the scrollable area -- 
 nav 
 li a href="#section1" rel="external nofollow" rel="external nofollow" Section 1 /a /li 
 /nav 
 !-- Section 1 -- 
 div id="section1" 
 h1 Section 1 /h1 
 p Try to scroll this page and look at the navigation bar while scrolling! /p 
 /div 
 /body 

垂直Scrollspy例子

 body data-spy="scroll" data-target="#myScrollspy" data-offset="20" 
 div 
 div 
 nav id="myScrollspy" 
 li a href="#section1" rel="external nofollow" rel="external nofollow" Section 1 /a /li 
 /ul 
 /nav 
 div 
 div id="section1" 
 h1 Section 1 /h1 
 p Try to scroll this page and look at the navigation list while scrolling! /p 
 /div 
 /div 
 /div 
 /div 
 /body 

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。




扫描二维码分享到微信