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

```
npm install sticky-js
``

``
bower install sticky.js
``

Usage

Simply include

`html

`

Then have element

`html



`

Initialize in javascript

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

Syntax

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

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

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

Examples

Multiple sticky elements with data-sticky-container and options

`html




`

Methods

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

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

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

Destroy sticky element

`js
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

$3

Clone this repository and run

`js
npm start
``

Browser Compatibility

Library is using ECMAScript 5 features.

* IE 9+
* Chrome 23+
* Firefox 21+
* Safari 6+
* Opera 15+

If you need this library working with older browsers you should use ECMAScript 5 polyfill.

Full support

*

$3

https://rgalus.github.io/sticky-js/

$3

MIT License