Search code examples
csstwitter-bootstrapscrollspy

Bootstrap scrollspy active selector not working

I have a simple bootstrap 3 scrollspy problem where the 'active' li tag is not getting activated when I scroll up/down the page. Everything else about the scrollspy works as expected.

I have seen all other stack overflow question regarding this and experimented in jsfiddle for about two hours with no progress.

Using dev tools and setting and li to :active manually shows the desired effect.

HTML 

  <header>
    <nav class="navbar navbar-default navbar-fixed-top" id="spy-navbar">
      <div class="container text-center">
        <ul class="nav navbar-nav inline">
          <li> <a href="#one" class="smooth-scroll">ONE</a> </li>
          <li> <a href="#two" class="smooth-scroll">TWO</a> </li>
          <li> <a href="#three" class="smooth-scroll">THREE</a> </li>
          <li> <a href="#four" class="smooth-scroll">FOUR</a> </li>
        </ul>
      </div>
    </nav>
  </header>

  <main class="container">
    <article id="one">one</article>
    <article id="two">two</article>
    <article id="three">three</article>
    <article id="four">four</article>
  </main>

</body>

CSS

li > a:hover,
li:active {
  border-bottom: 2px solid #2d9fff;
}

My jsfiddle link is located here: https://jsfiddle.net/hswg5j3q/

Can anyone check out my jsfiddle and see what I am missing? Many thanks in advance.

Solution

  • It's because your fiddle doesn't include bootstrap.js. The JS is needed for the ScrollSpy component.

    Working on Bootply: http://bootply.com/wJHL1Vqpdi