The Scrollspy (auto updating nav) plugin allows you to target sections of the page based on the scroll position. In its basic implementation, as you scroll, you can add .active classes to the navbar based on the scroll position.
Usage
You can use the scrollspy plugin via data attributes or manually with your own JavaScript as discussed below.
Creating ScrollSpy via data attributes
Add data-spy = "scroll" to the element you want to spy on (typically the body). Then add attribute data-target with the ID or class of the parent element of any Bootstrap .nav component. For this to work, you must have elements in the body of the page that have matching IDs of the links that you are spying on.
Example
<body data-spy = "scroll" data-target = ".navbar-example">
...
<div class = "navbar-example">
<ul class = "nav nav-tabs">
...
</ul>
</div>
...
</body>
Creating ScrollSpy via JavaScript
You may also add scrollspy manually using the JavaScript — just call the scrollspy() Bootstrap method with the id or class selector of the navbar in your JavaScript code.
Example
<script type="text/javascript">
$(document).ready(function(){
$("body").scrollspy({
target: "#myNavbar",
offset: 70
})
});
</script>
