Scrollspy Bootstrap v3.3 不工作

Question

使用 Bootstrap v3.3 w/ 附加在导航栏上。 Affix 工作正常，但我根本无法让 scrollspy 工作。我创建了一个 fiddle here（从 fiddle 中删除了词缀）以尝试查看它是否不是我的 JS 中的其他内容或 w/e 不正确，但是 fiddle也不行。

下面是例子fiddle:

.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 而不是。
尝试使用 classes 而不是 id（对于 data-target）。
尝试从 ID 中删除连字符
检查 bootstrap.js 文件中是否包含 scrollspy
已检查控制台错误

我想我已经用尽了所有努力，如果我什至无法在 fiddle 上运行，显然我错过了一些简单的东西。我没有看到 .active class 被分配给任何导航元素。

Answer 1

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

 $('#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>

Answer 2

@vanburenx - 您的 post 是正确的，但是，我唯一需要的是将 class、.nav 添加到相应的 ul 元素。

根据 boostrap 文档：

To easily add scrollspy behavior to your topbar navigation, just add data-spy="scroll" to the element you want to spy on (most typically this would be the body) and data-target=".navbar" to select which nav to use. You'll want to use scrollspy with a .nav component.

<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>

Scrollspy Bootstrap v3.3 不工作

Scrollspy Bootstrap v3.3 not working

jquery

twitter-bootstrap

scrollspy