title: Bootstrap scrollspy active selector not working
body: <p>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.</p>
  
  <p>I have seen all other stack overflow question regarding this and experimented in jsfiddle for about two hours with no progress. </p>
  
  <p>Using dev tools and setting and li to :active manually shows the desired effect.</p>
  
  <p>HTML
      </p>
  
  <pre><code>  &lt;header&gt;
      &lt;nav class="navbar navbar-default navbar-fixed-top" id="spy-navbar"&gt;
        &lt;div class="container text-center"&gt;
          &lt;ul class="nav navbar-nav inline"&gt;
            &lt;li&gt; &lt;a href="#one" class="smooth-scroll"&gt;ONE&lt;/a&gt; &lt;/li&gt;
            &lt;li&gt; &lt;a href="#two" class="smooth-scroll"&gt;TWO&lt;/a&gt; &lt;/li&gt;
            &lt;li&gt; &lt;a href="#three" class="smooth-scroll"&gt;THREE&lt;/a&gt; &lt;/li&gt;
            &lt;li&gt; &lt;a href="#four" class="smooth-scroll"&gt;FOUR&lt;/a&gt; &lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
      &lt;/nav&gt;
    &lt;/header&gt;
  
    &lt;main class="container"&gt;
      &lt;article id="one"&gt;one&lt;/article&gt;
      &lt;article id="two"&gt;two&lt;/article&gt;
      &lt;article id="three"&gt;three&lt;/article&gt;
      &lt;article id="four"&gt;four&lt;/article&gt;
    &lt;/main&gt;
  
  &lt;/body&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>li &gt; a:hover,
  li:active {
    border-bottom: 2px solid #2d9fff;
  }
  </code></pre>
  
  <p>My jsfiddle link is located here:
  <a href="https://jsfiddle.net/hswg5j3q/" rel="nofollow">https://jsfiddle.net/hswg5j3q/</a></p>
  
  <p>Can anyone check out my jsfiddle and see what I am missing? Many thanks in advance.</p>