Have ideas to improve npm?Join in the discussion! »

    sticky-js

    1.3.0 • Public • Published

    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: ~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

    <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

    Install

    npm i sticky-js

    DownloadsWeekly Downloads

    11,001

    Version

    1.3.0

    License

    MIT

    Unpacked Size

    45.3 kB

    Total Files

    11

    Last publish

    Collaborators

    • avatar