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

前端技术 2023/09/06 JavaScript

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

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

<!-- id=\"menu\" 为data-target=\"#menu\" 的监听对象-->
<!-- navbar navbar-inner nav navbar-fixed-top 固定导航条 -->
<div id=\"menu\" class=\"navbar navbar-fixed-top\">
  <div class=\"navbar-inner\">
    <div class=\"nav\">
      <li><a href=\"#1\">列表1</a></li>
      <li><a href=\"#2\">列表2</a></li>
      <!-- dropdown dropdown-menu 下拉菜单 -->
      <li class=\"dropdown\">
        <!-- data-toggle=\"dropdown\" 调用下拉行为 -->
        <a href=\"#\" data-toggle=\"dropdown\">下拉菜单<b class=\"caret\"></b></a>
        <ul class=\"dropdown-menu\">
          <li><a href=\"#3\">列表3</a></li>
          <li><a href=\"#4\">列表4</a></li>
          <li><a href=\"#5\">列表5</a></li>
        </ul>
      </li>
    </div>
  </div>
</div>
<!-- data-spy=\"scroll\"为监听对象设置data属性 -->
<!-- data-target=\"#menu\"设置监听对象 -->
<!-- data-offset=\"30\"设置偏移量 -->
<div class=\"scrollspy\" data-spy=\"scroll\" data-target=\"#menu\" data-offset=\"30\">
  <h3 id=\"1\">列表1</h3>
  <p><img src=\"img/1.jpg\"></p>
  <h3 id=\"2\">列表2</h3>
  <p><img src=\"img/2.jpg\"></p>
  <h3 id=\"3\">列表3</h3>
  <p><img src=\"img/3.jpg\"></p>
  <h3 id=\"4\">列表4</h3>
  <p><img src=\"img/4.jpg\"></p>
  <h3 id=\"5\">列表5</h3>
  <p><img src=\"img/5.jpg\"></p>
</div>

滚动监听

<body data-spy=\"scroll\" data-target=\"#navbar\" data-offset=\"0\">
<div id=\"navbar\">
  <ul class=\"nav nav-pills nav-stacked\">
    <li><a href=\"#1\">列表1</a></li>
    <li><a href=\"#2\">列表2</a></li>
    <li class=\"dropdown\">
      <a href=\"#\" data-toggle=\"dropdown\">下拉菜单 <b class=\"caret\"></b></a>
      <ul class=\"dropdown-menu\">
        <li><a href=\"#3\">列表3</a></li>
        <li><a href=\"#4\">列表4</a></li>
        <li><a href=\"#5\">列表5</a></li>
      </ul>
    </li>
  </ul>
</div>
<!-- data-spy=\"scroll\"为监听对象设置data属性 -->
<!-- data-target=\"#menu\"设置监听对象 -->
<!-- data-offset=\"30\"设置偏移量 -->
<div class=\"scrollspy\" >
  <h3 id=\"1\">列表1</h3>
  <p><img src=\"img/1.jpg\"></p>
  <h3 id=\"2\">列表2</h3>
  <p><img src=\"img/2.jpg\"></p>
  <h3 id=\"3\">列表3</h3>
  <p><img src=\"img/3.jpg\"></p>
  <h3 id=\"4\">列表4</h3>
  <p><img src=\"img/4.jpg\"></p>
  <h3 id=\"5\">列表5</h3>
  <p><img src=\"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程序设计有所帮助。

本文地址：https://www.stayed.cn/item/17157

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案