Add scrollspy behavior via data attributes or JavaScript.
No matter the implementation method, scrollspy requires the use of position: relative; on the element you're spying on. In most cases this is the <body>.
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 class="navbar-example">
<ul class="nav nav-tabs">
...
</ul>
</div>
...
</body>After adding position: relative; in your CSS, call the scrollspy via JavaScript:
wvusUikit('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.
When using scrollspy in conjunction with adding or removing of elements from the DOM, you'll need to call the refresh method like so:
wvusUikit('[data-spy="scroll"]').each(function () {
var $spy = wvusUikit(this).scrollspy('refresh')
})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 whenever a new item becomes activated by the scrollspy. |
wvusUikit('#myScrollspy').on('activate.bs.scrollspy', function () {
// do something…
})