StickyStack
Make your reading context, titles, and subtitles stick while user scrolls the page - Demo
Usage
Plain use:
<script type="text/javascript" src='stickyStack.min.js'></script>Browserify, Webpack, etc.
StickyStack = require('StickyStack')Make stuff sticky
// make .header stick at the top of the page, .title, and .subtitle to follow
var stickyStack = new StickyStack(['.header','.title', '.subtitle'])// clean up when done
stickyStack.destroy()Important: Sticky stack makes things sticky. You still have to style the elements to make it look good. For example:
// make sure the sticky elements occlude the content behind them.
.sticky-elements{
width: 100%;
background: white;
}API
Constructor StickyStack([first level elements, second level elements, ... ], options)
var stickyStack = new StickyStack(['.title', '.subtitle', 'h3'])- elements[array/string] - an array of elements, grouped by desired level in stickiness stack. Each element can be
- CSS selector for desired elements
- DOM element
- Array of DOM elements
- options:
- offset: the initial offset of the sticky stack. Distance from the head of the parent object
StickyStack.prototype.refresh()
Recalculate and reposition all elements. Use this after a change in the page have changed the horizontal positioning of elements.
StickyStack.prototype.destroy()
Removes sticky stack effect from page.