学习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程序设计有所帮助。