想在 Bootstrap 中使用带有分页的滚动间谍答案

【问题标题】：Want to use a scrollspy with pagination in Bootstrap想在 Bootstrap 中使用带有分页的滚动间谍
【发布时间】：2015-08-03 22:14:11
【问题描述】：

正如标题所说，我想在 Bootstrap 中使用带有分页功能的 scrollspy，但 activate.bs.scrollspy 似乎不起作用。

这是我的html代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Starter Template for Bootstrap</title>

    <!-- Bootstrap core CSS -->
    <link href="../bootstrap-3.3.5-dist/css/bootstrap.min.css" rel="stylesheet">

    <style>
  body {
      position: relative; 
  }
  #section1 {padding-top:50px;height:500px;color: #fff; background-color: #1E88E5;}
  #section2 {padding-top:50px;height:500px;color: #fff; background-color: #673ab7;}
  #section3 {padding-top:50px;height:500px;color: #fff; background-color: #ff9800;}

  </style>
  </head>

  <body data-spy="scroll" data-target=".navbar-fixed-bottom" data-offset="50">

    <nav class="navbar-fixed-bottom">
      <ul class="pagination">
        <li><a href="#section1">1</a></li>
        <li><a href="#section2">2</a></li>
        <li><a href="#section3">3</a></li>
      </ul>
    </nav>

    <div class="container">
        <div id="section1" class="container-fluid">
          <h1>Section 1</h1>
          <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
          <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
        </div>
        <div id="section2" class="container-fluid">
          <h1>Section 2</h1>
          <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
          <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
        </div>
        <div id="section3" class="container-fluid">
          <h1>Section 3</h1>
          <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
          <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
        </div>

    </div>

    <script src="../jquery/jquery-2.1.4.min.js"></script>
    <script src="../bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
    <script type="text/javascript">
      $('.navbar-fixed-bottom').on('activate.bs.scrollspy', function () {
        alert("rg");
      });
    </script>
  </body>
</html>

Bootstrap 说 scrollspy 与导航一起使用，而我的分页是导航，那为什么呢？这是一种让它发挥作用的方法吗？

提前致谢。

【问题讨论】：

标签： twitter-bootstrap pagination scrollspy

【解决方案1】：

将类“.nav”放在寻呼机ul上，因为它在插件构造函数中硬编码，它搜索“目标（即.navbar-fixed-bottom）+ .nav li > a”

function ScrollSpy(element, options) {
...
this.selector       = (this.options.target || '') + ' .nav li > a'
...

所以它会给我们“.navbar-fixed-bottom .nav li>a”

working demo

【讨论】：