npm install
npm run build
npm run test:unit
npm run lint
The lib is named uberglue (or vue-uberglue) but the directive is called sticky
to be consistent with other sticky
element libraries.
- Add uberglue to your app
import 'uberglue' from 'vue-uberglue' Vue.use(uberglue)
- Add the sticky directive to the element which should be sticky and add a
sticky-container
html attribute to the element which should determine the top/bottom boundaries.<div sticky-container> <div class="some-other-container some-width"> <div class="some-width" v-sticky> <p>I'm sticky!</p> </div> </div> </div>
- Make sure that the sticky element can become
position: absolute
orposition: fixed
without breaking the layout. This can often be done by assigning the direct parent and the sicky element the same fixed width:.some-width { width: 300px; }
- Done!
The sticky element will obtail a stickyState
data set attribute (e.g. data-sticky-state="scroll-top"
). The values can be:
scroll-top
: not scrolled far enough so the element will scroll, sticking on the topstick-top
: element getsdisplay:fixed
and sticks to the top edge of the browserscroll-bottom
: scrolled too far so the element will stick to the bottom edge of the container
What does uberglue do? It makes the sticky element position: absolute
or position: fixed
depending on where the
scroll bar is. It also inserts a placeholder element with the same clientRect
dimensions directly after the
sticky element so the resulting 'hole' is filled.
For this to work make sure you assign the right z-index
to the sticky element.