Question

就像标题所说我想在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可以使用nav，而我的分页是一个导航，为什么呢？它是一种使其有效的方法吗？

提前致谢。

Answer 1

上课＆＃34; .nav＆＃34;在寻呼机ul上，因为它在插件构造函数中硬编码，它搜索＆＃34; target（.navbar-fixed-bottom）+ .nav li＆gt; a＆＃34;

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

所以它会给我们＆＃34; .navbar-fixed-bottom .nav li＆gt; a＆＃34;

working demo

想在Bootstrap中使用带分页的scrollspy

1 个答案: