1.0.1 • Published 8 years ago
stickyStack v1.0.1
StickyStack
Make you reading context, titles, and subtitles stick while user scroll 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'])
- elementsarray/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.