sticky.js 
Sticky items in a scrollable DOM element.
Features
- Define custom selectors for the scrollable element, the items to make sticky, and the element to hold the “stuck” items
- Zero dependencies; 1.5 KB minified or 0.7 KB minified and gzipped
Usage
<!DOCTYPE html>
<html>
<head>
<title>sticky</title>
<meta charset="utf-8">
<style>
body, p {margin: 0; }
.sticky {margin: 0 auto; width: 300px; }
.sticky__content {height: 300px; }
.sticky__item {background: yellow; }
</style>
</head>
<body>
<div class="sticky">
<div class="sticky__stuck"></div>
<div class="sticky__content">
<p>Iuvaret intellegat nec at, duo illud conceptam te. Eos habeo omnium principes ne. Cu cum malis ludus equidem, mei nibh nobis ponderum ne, ei mea civibus adipisci. Clita invidunt definitiones duo in, est alii omnes gloriatur te. Mea utroque disputando an. Ne vidit euripidis omittantur per, sea ne iusto saperet, eu equidem maiorum denique vim. Sapientem abhorreant in eam, per ut nonumes accusata scribentur. Pro ea periculis posidonium, duo diceret constituam ea, consul putent cu nec.</p>
<div class="sticky__item">Ius et aeque adversarium concludaturque eripuit denique et nam, ea mei impetus nominati.</div>
<!-- ... -->
</div>
</div>
<script src="path/to/sticky.min.js"></script>
<script>
var elem = document.querySelector('.sticky');
var opts = {
contentSelector: '.sticky__content',
itemSelector: '.sticky__item',
stuckSelector: '.sticky__stuck'
};
sticky(elem, opts);
</script>
</body>
</html>In the browser, the sticky function is a global variable. In Node, do:
var sticky = require('@yuanqing/sticky');var s = sticky(elem, opts)
-
elem— A DOM element. -
opts— An object literal:Key Description Default contentSelectorSelector for the scrollable element .sticky__contentitemSelectorSelector for items we want to make sticky .sticky__itemstuckSelectorSelector for the element to hold the “stuck” items .sticky__stuck
s.init()
Re-initialises the component, ie. recomputes the items we want to make sticky. This is uesful if any changes were made to the contents of the given elem.
Limitations
- Do not use an
idattribute to style elements that match theitemSelector. (It is okay to add anidto these elements as a fragment identifier.)
Installation
Install via npm:
$ npm i --save @yuanqing/sticky
Install via bower:
$ bower i --save yuanqing/sticky
Changelog
- 0.1.0
- Initial release