sticky-js

Open source

Library for sticky elements written in vanilla javascript

725 stars0 likes1 views

About

Library for sticky elements written in vanilla javascript

sticky-js

Sticky-js is a library for sticky elements written in vanilla javascript. With this library you can easily set sticky elements on your website. It's also responsive.

DEMO

Features

Written in vanilla javascript, no dependencies needed
Lightweight (minified: ~7.0kb, gzipped: ~1.9kb)
It can be sticky to the entire page or to selected parent container
No additional CSS needed

Install

bash

npm install sticky-js

bower install sticky.js

Usage

Simply include

xml

Then have element

xml

Initialize in javascript

javascript

var sticky = new Sticky('.selector');

Syntax

javascript

new Sticky([selector:string], [global options:object])

CommonJS

javascript

var Sticky = require('sticky-js');

var sticky = new Sticky('.selector');

Examples

Multiple sticky elements with data-sticky-container and options

xml

Methods

Update sticky, e.g. when parent container (data-sticky-container) change height

javascript

var sticky = new Sticky('.sticky');

// and when parent change height..
sticky.update();

Destroy sticky element

javascript

var sticky = new Sticky('.sticky');

sticky.destroy();

Available options

Option	Type	Default	Description
data-sticky-wrap	boolean	false	When it's `true` sticky element is wrapped in `` which has sticky element dimensions. Prevents content from "jumping".
data-margin-top	number	0	Margin between page and sticky element when scrolled
data-sticky-for	number	0	Breakpoint which when is bigger than viewport width, sticky is activated and when is smaller, then sticky is destroyed
data-sticky-class	string	null	Class added to sticky element when it is stuck