To easily add affix behavior to any element, just add data-spy="affix" to the element you want to spy on. Then use offsets to define when to toggle the pinning of an element on and off.
<div data-spy="affix" data-offset-top="200">...</body>
affix, affix-top, and affix-bottom.Call the affix plugin via JavaScript:
query('#navbar').affix()| Method | Description |
|---|---|
| refresh | When using affix in conjunction with adding or removing of elements from the DOM, you'll want to call the refresh method: |
query('[data-spy="affix"]').forEach(function(elm){
query(elm).affix('refresh')
}); | |
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-offset-top="200".
| Name | type | default | description |
|---|---|---|---|
| offset | number | function | object | 10 | Pixels to offset from screen when calculating position of scroll. If a single number is provide, the offset will be applied in both top and left directions. To listen for a single direction, or multiple unique offsets, just provided an object offset: { x: 10 }. Use a function when you need to dynamically provide an offset (useful for some responsive designs). |