У меня есть простая проблема с scrollspy bootstrap 3, где «активный» тег li не активируется при прокрутке вверх/вниз по странице. Все остальное о scrollspy работает, как и ожидалось.Bootstrap scrollspy active selector
Я видел все другие проблемы с переполнением стека относительно этого и экспериментировал в jsfiddle около двух часов без каких-либо успехов.
Использование инструментов dev и настроек и li to: active вручную показывает желаемый эффект.
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;
}
Мой jsfiddle ссылка находится здесь: https://jsfiddle.net/hswg5j3q/
Может кто-нибудь проверить мою jsfiddle и посмотреть, что мне не хватает? Спасибо заранее.