学习Bootstrap滚动监听 附调用方法
本文为大家介绍Bootstrap滚动监听,供大家学习,具体内容如下
滚动监听伴随着滚动条的滚动,列表项被不断切换激活
<!--id="menu"为data-target="#menu"的监听对象--> <!--navbarnavbar-innernavnavbar-fixed-top固定导航条--> <divid="menu"class="navbarnavbar-fixed-top"> <divclass="navbar-inner"> <divclass="nav"> <li><ahref="#1">列表1</a></li> <li><ahref="#2">列表2</a></li> <!--dropdowndropdown-menu下拉菜单--> <liclass="dropdown"> <!--data-toggle="dropdown"调用下拉行为--> <ahref="#"data-toggle="dropdown">下拉菜单<bclass="caret"></b></a> <ulclass="dropdown-menu"> <li><ahref="#3">列表3</a></li> <li><ahref="#4">列表4</a></li> <li><ahref="#5">列表5</a></li> </ul> </li> </div> </div> </div> <!--data-spy="scroll"为监听对象设置data属性--> <!--data-target="#menu"设置监听对象--> <!--data-offset="30"设置偏移量--> <divclass="scrollspy"data-spy="scroll"data-target="#menu"data-offset="30"> <h3id="1">列表1</h3> <p><imgsrc="img/1.jpg"></p> <h3id="2">列表2</h3> <p><imgsrc="img/2.jpg"></p> <h3id="3">列表3</h3> <p><imgsrc="img/3.jpg"></p> <h3id="4">列表4</h3> <p><imgsrc="img/4.jpg"></p> <h3id="5">列表5</h3> <p><imgsrc="img/5.jpg"></p> </div>
滚动监听
<bodydata-spy="scroll"data-target="#navbar"data-offset="0"> <divid="navbar"> <ulclass="navnav-pillsnav-stacked"> <li><ahref="#1">列表1</a></li> <li><ahref="#2">列表2</a></li> <liclass="dropdown"> <ahref="#"data-toggle="dropdown">下拉菜单<bclass="caret"></b></a> <ulclass="dropdown-menu"> <li><ahref="#3">列表3</a></li> <li><ahref="#4">列表4</a></li> <li><ahref="#5">列表5</a></li> </ul> </li> </ul> </div> <!--data-spy="scroll"为监听对象设置data属性--> <!--data-target="#menu"设置监听对象--> <!--data-offset="30"设置偏移量--> <divclass="scrollspy"> <h3id="1">列表1</h3> <p><imgsrc="img/1.jpg"></p> <h3id="2">列表2</h3> <p><imgsrc="img/2.jpg"></p> <h3id="3">列表3</h3> <p><imgsrc="img/3.jpg"></p> <h3id="4">列表4</h3> <p><imgsrc="img/4.jpg"></p> <h3id="5">列表5</h3> <p><imgsrc="img/5.jpg"></p> </div>
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程序设计有所帮助。