Scrollspy is used track certain elements and update bootstrap navigation or list group components based on scroll position to indicate which link is currently active in the viewport.
position: relative; on the element you're spying on, usually the <body>.<body>, you must set height and overflow-y: scroll;.<a>) are required and must point to an element with that id.After implementation, your nav or list group will update accordingly, moving the .active class from one item to the next based on their associated targets.
Scrollspy can added via data attributes or via javascript.
Create a bootstrap's nav component. On the body element add the data attribute data-spy="scroll" and set data-target="<target-id>" where <target-id> is the id or the class name of the navigation bar. The scrollable elements must match the ID of the links inside the navbar's list items (<div id="section-one"> matches <a href="#section-one">). The dropdown items will be highlighted as well.
When you scroll the area below the navbar, the active class change. The dropdown items will be highlighted as well.
611Add data-offset attribute which is used to set pixels to offset from top when calculating position of scroll.
Scrollspy also works with nested .navs. If a nested .nav is .active, its parents will also be .active. Scroll the area next to the navbar and watch the active class change.
Scrollspy also works with .list-groups. Scroll the area next to the list group and watch the active class change.
To easily add scrollspy behavior to your topbar navigation, add data-spy="scroll" 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 .nav component.
body {
position: relative;
}
<body data-spy="scroll" data-target="#navbar-example">
...
<div id="navbar-example">
<ul class="nav nav-tabs" role="tablist">
...
</ul>
</div>
...
</body>After adding position: relative; in your CSS, call the scrollspy via JavaScript.
$('body').scrollspy({ target: '#navbar-example' })Navbar links must have resolvable id targets. For example, a <a href="#home">home</a> must correspond to something in the DOM like <div id="home"></div>.
:visible target elements ignoredTarget elements that are not :visible according to jQuery will be ignored and their corresponding nav items will never be highlighted.
Methods
.scrollspy('refresh')
When using scrollspy in conjunction with adding or removing of elements from the DOM, you’ll need to call the refresh method like so:
$('[data-spy="scroll"]').each(function () {
var $spy = $(this).scrollspy('refresh')
}).scrollspy('dispose')
Destroys an element's scrollspy.
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-offset="".
| Name | Type | Default | Description |
|---|---|---|---|
| offset | number | 10 | Pixels to offset from top when calculating position of scroll. |
| Event Type | Description |
|---|---|
| activate.bs.scrollspy | This event fires on the scroll element whenever a new item becomes activated by the scrollspy. |
$('[data-spy="scroll"]').on('activate.bs.scrollspy', function () {
// do something…
})
