Scrollspy Bootstrap v3.3 not working

后端未结

关注

 2  1209

Using Bootstrap v3.3 w/ affix on navigation bar. Affix is working fine, but I cannot get the scrollspy to work at all. I created a fiddle here (removed affix from fiddle) to att

相关标签:

2条回答

無奈伤痛

2021-01-26 11:29
@vanburenx - your post was correct, however, the only thing I needed was to add the class, .nav, to the corresponding ul element.

Per the boostrap documentation:

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>
```
0 讨论(0)
发布评论:

提交评论
- 加载中...

被撕碎了的回忆

2021-01-26 11:31

Here's an example of how you can do this. I would suggest using at least some pre-defined Bootstrap classes (esp for navigation links) otherwise you'll need to define all the states if you want your links to show a change to 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>

0 讨论(0)