The ScrollSpy plugin is for automatically updating nav targets based on scroll position. In its basic implementation, as you scroll, you can add <code>.active </code> classes to the navbar based on the scroll position. The dropdown sub items will be highlighted as well.
Via Data attributes : To easily add scrollspy behavior to your topbar navigation, add <code>data-spy="scroll"</code> to the element you want to spy on (most typically this would be the <body>). Then add the data-target attribute with the ID or class of the parent element of any Bootstrap <code>.nav</code> component.
<body data-spy="scroll" data-target="#navbar-example">
...
<div id="navbar-example">
<ul class="nav nav-tabs" role="tablist">
...
</ul>
</div>
...
</body>
Via JavaScript : First you can add position:relative; in your CSS, call the scrollspy via JavaScript:
$('body').scrollspy({ target: '#navbar-example' })
