欢迎来到福编程网,本站提供各种互联网专业知识!

学习Bootstrap滚动监听 附调用方法

发布时间:2016-07-02 作者:投稿lijiao 来源:转载
这篇文章主要为大家全面解析Bootstrap中滚动监听的使用方法,感兴趣的小伙伴们可以参考一下

本文为大家介绍Bootstrap滚动监听,供大家学习,具体内容如下

滚动监听 伴随着滚动条的滚动,列表项被不断切换激活







列表1

列表2

列表3

列表4

列表5

滚动监听






列表1

列表2

列表3

列表4

列表5

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

相关推荐