Library for sticky elements written in vanilla javascript
Clone or download
rgalus Merge pull request #27 from lastfm/feature/requirejs
Fix #19 Add wrapper function for RequireJS
Latest commit 0a0dca4 Aug 1, 2017
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo Update demo Jan 30, 2017
dist 1.2.0 Apr 19, 2017
src Fix #19 Add wrapper function for RequireJS Jun 5, 2017
.babelrc build Jul 21, 2016
.editorconfig Add .editorconfig Sep 2, 2016
.gitignore Initial commit Jul 19, 2016
.npmignore Add .npmignore Oct 12, 2016
LICENSE Initial commit Jul 19, 2016
README.md Add destroy method Feb 7, 2017
bower.json 1.2.0 Apr 19, 2017
gulpfile.babel.js Fix exported tasks Sep 2, 2016
index.js Add index.js Sep 30, 2016
package.json 1.2.0 Apr 19, 2017
yarn.lock Update yarn.lock Apr 11, 2017

README.md

sticky-js

npm version Bower version

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: ~6.08kb, gzipped: ~1.67kb)
  • 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

<script src="sticky.min.js"></script>

Then have element

<div class="selector">Sticky element</div>

Initialize in javascript

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

Syntax

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

CommonJS

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

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

Examples

Multiple sticky elements with data-sticky-container and options

<div class="row" data-sticky-container>
  <div class="medium-2 columns">
    <img src="http://placehold.it/250x250" class="sticky" data-margin-top="20" data-sticky-for="1023" data-sticky-class="is-sticky">
  </div>
  <div class="medium-8 columns">
    <h1>Sticky-js</h1>
    <p>Lorem ipsum.....</p>
  </div>
  <div class="medium-2 columns">
    <img src="http://placehold.it/250x250" class="sticky" data-margin-top="20" data-sticky-for="1023" data-sticky-class="is-sticky">
  </div>
</div>

<script src="sticky.min.js"></script>
<script>
  var sticky = new Sticky('.sticky');
</script>

Methods

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

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

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

Destroy sticky element

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 <span></span> 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

Development

Clone this repository and run

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


Website

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

License

MIT License