rgalus / Sticky Js
Licence: mit
Library for sticky elements written in vanilla javascript
Stars: ✭ 618
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Sticky Js
Viewport Checker
Little utility to detect if elements are currently within the viewport 🔧
Stars: ✭ 596 (-3.56%)
Mutual labels: browser
Bpmn Js
A BPMN 2.0 rendering toolkit and web modeler.
Stars: ✭ 5,592 (+804.85%)
Mutual labels: browser
Browser.php
A PHP Class to detect a user's Browser. This encapsulation provides a breakdown of the browser and the version of the browser using the browser's user-agent string. This is not a guaranteed solution but provides an overall accurate way to detect what browser a user is using.
Stars: ✭ 546 (-11.65%)
Mutual labels: browser
Chromy
Chromy is a library for operating headless chrome. 🍺🍺🍺
Stars: ✭ 593 (-4.05%)
Mutual labels: browser
Webdriver
Remote control interface that enables introspection and control of user agents.
Stars: ✭ 546 (-11.65%)
Mutual labels: browser
Headlessbrowsers
A list of (almost) all headless web browsers in existence
Stars: ✭ 5,511 (+791.75%)
Mutual labels: browser
Simple Peer
📡 Simple WebRTC video, voice, and data channels
Stars: ✭ 5,923 (+858.41%)
Mutual labels: browser
Helpjs Ravi
Exercícios/Tutorial/Desafios para Iniciantes em JavaScript
Stars: ✭ 579 (-6.31%)
Mutual labels: 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.
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.
Website
https://rgalus.github.io/sticky-js/
License
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].