Giter VIP home page Giter VIP logo

sticky-js's Introduction

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

sticky-js's People

Contributors

rgalus avatar marcveens avatar mrfranke avatar sassninja avatar tdhooper avatar idaho avatar utlime avatar xurshid29 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.