Stuck.js
This is the one of sticky libraries handles stack of stickies and supports scrollX without dependencies(like jQuery)
Installation
npm module:
npm i -S stuck-js
import Stuck from 'stuck-js'
<script>:
import from CDN
<script src="https://unpkg.com/stuck-js/lib/index.js"></script>
or you can download from Github release and place `./lib/index.js` on your project
<script src="./vendor/stuck.js"></script>
How to use
<style>
header {
height: 100px;
z-index: 100;
}
.ad {
width: 300px;
height: 250px;
}
</style>
<body>
<header style="height: 100px; z-index: 100;">
<h1>This is my first website</h1>
<!-- header contents -->
</header>
<div>
<main>
<!-- main contents -->
</main>
<div id="js-sidebar">
<aside class="js-sticky-ad ad ad--01"><!-- ad contents --></aside>
<aside class="js-sticky-ad ad ad--02"><!-- ad contents --></aside>
</div>
</div>
<script src="https://unpkg.com/stuck-js/lib/index.js"></script>
<script>
const Stuck = StuckJs.Stuck;
const instances = new Stuck([
{ selector: '#js-header', marginTop: 0 },
{ selector: '.js-sticky-ad', wrapper: '#js-sidebar' },
], { marginTop: 10 });
</script>
</body>
if you use as umd package, this package will be included and bound with `window.StuckJs` or simply `StuckJs`.
or if you use npm and ES6 or TypeScript
import { Stuck } from 'stuck-js';
// or const StuckJs = require('stuck-js');
const instances = new Stuck([
{ selector: '#js-header', marginTop: 0 },
{ selector: '.js-sticky-ad', wrapper: '#js-sidebar' },
], { marginTop: 10 });
Options
you can use to create `Stuck` instance, for example:
new Stuck(settings, defaultOptions, sharedStacking);
the first "required" argument, `settings`, can be Array of Objects or a single Object:
{
selector: string,
marginTop?: number,
wrapper?: HTMLElement|string,
placehold?: boolean,
}
you can specify HTMLElement(or Array<HTMLElement>) instead of the selector:
{
element: HTMLElement | HTMLElement[],
marginTop?: number,
wrapper?: HTMLElement|string,
placehold?: boolean,
}
marginTop Number 0
"marginTop" is the space between the element and the previous stacking element or the ceiling (as same as the top of window).
wrapper HTMLElement parentElement|document.body
"wrapper" is the root node of the stack behavior. the stickies will be make stack inside of the wrapper node.
placehold boolean true
You can create the "not-placehold" stickies with this option. "placehold: false" makes that the space where the original element is placed will be gone away while being sticky.