Scrollspy Bootstrap v3.3 not working

2020-05-08 17:27发布

站内问答 / jQuery
1910 2 5

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 attempt to see if it wasn't something else in my JS or w/e that wasn't correct, but fiddle is not working either.

Below is example 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>

Things that I have tried:

  • Removing data-scroll and data-target from body tag and implementing through JS instead. (ie - $('body').scrollspy.....)
  • Moving id's around (instead of on the section, moved to h2, etc.
  • Tried moving the data-target id, #product-nav, to the parent div of the ul instead.
  • Tried using classes instead of ids (for data-target).
  • Tried removing hyphens from the ids
  • Checked to see if scrollspy was included in the bootstrap.js file
  • Checked for console errors

I figured I've exhausted my efforts, and obviously I'm missing something simple if I cannot even get it to work on the fiddle. I am not seeing the .active class be assigned to any of the navigation elements.

2条回答
一夜七次
2楼-- · 2020-05-08 17:51

@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) 举报
爷的心禁止访问
3楼-- · 2020-05-08 17:52

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) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)