Scrollspy Bootstrap v3.3 不工作答案

【问题标题】：Scrollspy Bootstrap v3.3 not workingScrollspy Bootstrap v3.3 不工作
【发布时间】：2015-10-13 13:36:15
【问题描述】：

在导航栏上使用带有词缀的 Bootstrap v3.3。词缀工作正常，但我根本无法让滚动间谍工作。我创建了一个fiddle here（从小提琴中删除了词缀）来尝试查看它是否不是我的 JS 中的其他内容，或者不正确，但小提琴也不起作用。

下面是小提琴示例：

.product-nav.affix {
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    background-color: #555;
}

$('.product-nav').affix({
        offset: {
            top: $('.hero').height()
        }
});

<body data-spy="scroll" data-target="#product-nav">
    <header class="hero">
        <img src="http://placehold.it/400x1000" />
    </header>
    <div class="section gray no-padd">
        <div class="container">
            <!-- component -->
            <div class="product-nav">
                <ul class="list-inline spy-product-nav" id="product-nav">
                    <li><a href="#spy-key-content">Key Content</a>
                    </li>
                    <li><a href="#spy-capabilities">Capabilities</a>
                    </li>
                    <li><a href="#spy-image-carousel">Image Carousel</a>
                    </li>
                    <li><a href="#spy-video">Video</a>
                    </li>
                    <li><a href="#spy-materials">Materials</a>
                    </li>
                    <li><a href="#spy-contact-us">Contact us</a>
                    </li>
                </ul>
            </div>
            <!-- ends component -->
        </div>
    </div>
    <section id="spy-key-content">
        <img src="http://placehold.it/300x500" />
        <h2>Blah Blah blah</h2>
    </section>
</body>

我尝试过的事情：

从 body 标签中删除 data-scroll 和 data-target 和而是通过 JS 实现。（即 - $('body').scrollspy.....）
移动 id（而不是 section，移动到 h2 等）。
尝试将data-target id #product-nav 移动到父div ul 的替代品。
尝试使用类而不是 id（对于 data-target）。
尝试从 ID 中删除连字符
检查是否在 bootstrap.js 文件中包含 scrollspy
检查控制台错误

我想我已经用尽了我的努力，显然我错过了一些简单的东西，如果我什至不能让它在小提琴上工作。我没有看到将 .active 类分配给任何导航元素。

【问题讨论】：

标签： jquery twitter-bootstrap scrollspy

【解决方案1】：

下面是一个示例，说明如何执行此操作。我建议至少使用一些预定义的 Bootstrap 类（尤其是导航链接），否则如果您希望链接显示对 active 的更改，则需要定义所有状态。

 $('#nav').affix({
   offset: {
     top: $('header').height()
   }
 });

body {
  position: relative;
}
header {
  height: 125px;
  font-size: 50px;
  padding: 20px;
  text-align: center;
}
div#nav.affix {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 10;
}
.navbar.navbar-custom {
  margin-bottom: 0;
}
#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;
}
#section41 {
  padding-top: 50px;
  height: 500px;
  color: #fff;
  background-color: #00bcd4;
}
#section42 {
  padding-top: 50px;
  height: 500px;
  color: #fff;
  background-color: #009688;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />

<body data-spy="scroll" data-target=".navbar" data-offset="50">
  <header>Header Area</header>
  <div id="nav">
    <nav class="navbar navbar-inverse navbar-custom navbar-static-top">
      <div class="container-fluid">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span> 
          </button> <a class="navbar-brand" href="#">Brand</a>

        </div>
        <div>
          <div class="collapse navbar-collapse" id="myNavbar">
            <ul class="nav navbar-nav">
              <li><a href="#section1">Section 1</a>

              </li>
              <li><a href="#section2">Section 2</a>

              </li>
              <li><a href="#section3">Section 3</a>

              </li>
              <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Section 4 <span class="caret"></span></a>

                <ul class="dropdown-menu">
                  <li><a href="#section41">Section 4-1</a>

                  </li>
                  <li><a href="#section42">Section 4-2</a>

                  </li>
                </ul>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </nav>
  </div>
  <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 id="section41" class="container-fluid">
    <h1>Section 4 Submenu 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="section42" class="container-fluid">
    <h1>Section 4 Submenu 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>
</body>

【讨论】：

【解决方案2】：

@vanburenx - 你的帖子是正确的，但是，我唯一需要的是将类 .nav 添加到相应的 ul 元素中。

根据 boostrap 文档：

要轻松地将滚动监听行为添加到您的顶栏导航，只需将 data-spy="scroll" 添加到您要监视的元素（通常是正文）和 data-target=".navbar" 以选择使用哪个导航。 您需要将 scrollspy 与 .nav 组件一起使用。

<div class="product-nav" id="product-nav">
    <ul class="list-inline hidden-xs nav">  <--- needed that
        <li><a href="#spy-key-content">Key Content</a></li>
        <li><a href="#spy-capabilities">Capabilities</a></li>
        <li><a href="#spy-image-carousel">Image Carousel</a></li>
        <li><a href="#spy-video">Video</a></li>
        <li><a href="#spy-materials">Materials</a></li>
        <li><a href="#spy-contact-us">Contact us</a></li>
    </ul>
</div>

【讨论】：