sticky-js

WebJar for sticky-js

License	MIT
Categories	JavaScript Languages
GroupId	org.webjars.npm
ArtifactId	sticky-js
Last Version	1.2.0
Release Date	May 26, 2019
Type	jar
Description	sticky-js WebJar for sticky-js
Project URL	http://webjars.org
Source Code Management	https://github.com/rgalus/sticky-js

Download sticky-js

Filename	Size
sticky-js-1.2.0.pom
sticky-js-1.2.0.jar	53 KB
sticky-js-1.2.0-sources.jar	22 bytes
sticky-js-1.2.0-javadoc.jar	22 bytes

How to add to project

Apache Maven

<!-- https://jarcasting.com/artifacts/org.webjars.npm/sticky-js/ -->
<dependency>
    <groupId>org.webjars.npm</groupId>
    <artifactId>sticky-js</artifactId>
    <version>1.2.0</version>
</dependency>

Gradle Groovy

// https://jarcasting.com/artifacts/org.webjars.npm/sticky-js/
implementation 'org.webjars.npm:sticky-js:1.2.0'

Gradle Kotlin

// https://jarcasting.com/artifacts/org.webjars.npm/sticky-js/
implementation ("org.webjars.npm:sticky-js:1.2.0")

Apache Buildr

'org.webjars.npm:sticky-js:jar:1.2.0'

Apache Ivy

<dependency org="org.webjars.npm" name="sticky-js" rev="1.2.0">
  <artifact name="sticky-js" type="jar" />
</dependency>

Groovy Grape

@Grapes(
@Grab(group='org.webjars.npm', module='sticky-js', version='1.2.0')
)

Scala SBT

libraryDependencies += "org.webjars.npm" % "sticky-js" % "1.2.0"

Leiningen

[org.webjars.npm/sticky-js "1.2.0"]

Dependencies

There are no dependencies for this project. It is a standalone project that does not depend on any other jars.

Project Modules

There are no modules declared in this project.

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

<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

Versions

Version
1.2.0 May 26, 2019