PHPackages                             levmyshkin/sticky-js - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. levmyshkin/sticky-js

ActiveDrupal-library[Utility & Helpers](/categories/utility)

levmyshkin/sticky-js
====================

Sticky-js is a library for sticky elements written in vanilla javascript

1.3.0(1y ago)0101MITJavaScript

Since Jun 16Pushed 1y agoCompare

[ Source](https://github.com/levmyshkin/sticky-js)[ Packagist](https://packagist.org/packages/levmyshkin/sticky-js)[ RSS](/packages/levmyshkin-sticky-js/feed)WikiDiscussions master Synced today

READMEChangelogDependenciesVersions (2)Used By (0)

sticky-js
=========

[](#sticky-js)

[![npm version](https://camo.githubusercontent.com/c87e621c0cdfab80685895202252116c7eb33a499f6dc3e81f324235309e16c9/68747470733a2f2f62616467652e667572792e696f2f6a732f737469636b792d6a732e737667)](https://badge.fury.io/js/sticky-js)[![Bower version](https://camo.githubusercontent.com/9d16cfba83077b2bb9af232a04babbd1a4d57bd8bf0c26d41b99dd9b7a1bf369/68747470733a2f2f62616467652e667572792e696f2f626f2f737469636b792e6a732e737667)](https://badge.fury.io/bo/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](https://rgalus.github.io/sticky-js/)

Features
--------

[](#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
-------

[](#install)

```
npm install sticky-js

```

```
bower install sticky.js

```

Usage
-----

[](#usage)

Simply include

```

```

Then have element

```
Sticky element
```

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

[](#examples)

Multiple sticky elements with data-sticky-container and [options](https://github.com/rgalus/sticky-js#available-options)

```

    Sticky-js
    Lorem ipsum.....

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

```

Methods
-------

[](#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
-----------------

[](#available-options)

OptionTypeDefaultDescriptiondata-sticky-wrapbooleanfalseWhen it's `true` sticky element is wrapped in `` which has sticky element dimensions. Prevents content from "jumping".data-margin-topnumber0Margin between page and sticky element when scrolleddata-sticky-fornumber0Breakpoint which when is bigger than viewport width, sticky is activated and when is smaller, then sticky is destroyeddata-sticky-classstringnullClass added to sticky element when it is stuck### Development

[](#development)

Clone this repository and run

```
npm start
```

Browser Compatibility
---------------------

[](#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](http://caniuse.com/#search=ECMAScript%205)

---

### Website

[](#website)

### License

[](#license)

[MIT License](https://github.com/rgalus/sticky-js/blob/master/LICENSE)

###  Health Score

29

—

LowBetter than 57% of packages

Maintenance48

Moderate activity, may be stable

Popularity12

Limited adoption so far

Community12

Small or concentrated contributor base

Maturity37

Early-stage or recently created project

 Bus Factor1

Top contributor holds 83.8% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Unknown

Total

1

Last Release

383d ago

### Community

Maintainers

![](https://avatars.githubusercontent.com/u/1680925?v=4)[Ivan Abramenko](/maintainers/levmyshkin)[@levmyshkin](https://github.com/levmyshkin)

---

Top Contributors

[![rgalus](https://avatars.githubusercontent.com/u/7071269?v=4)](https://github.com/rgalus "rgalus (31 commits)")[![MrFranke](https://avatars.githubusercontent.com/u/2517106?v=4)](https://github.com/MrFranke "MrFranke (1 commits)")[![marcveens](https://avatars.githubusercontent.com/u/1115616?v=4)](https://github.com/marcveens "marcveens (1 commits)")[![tdhooper](https://avatars.githubusercontent.com/u/170479?v=4)](https://github.com/tdhooper "tdhooper (1 commits)")[![utlime](https://avatars.githubusercontent.com/u/9943271?v=4)](https://github.com/utlime "utlime (1 commits)")[![xurshid29](https://avatars.githubusercontent.com/u/5887811?v=4)](https://github.com/xurshid29 "xurshid29 (1 commits)")[![SassNinja](https://avatars.githubusercontent.com/u/19912475?v=4)](https://github.com/SassNinja "SassNinja (1 commits)")

### Embed Badge

![Health badge](/badges/levmyshkin-sticky-js/health.svg)

```
[![Health](https://phpackages.com/badges/levmyshkin-sticky-js/health.svg)](https://phpackages.com/packages/levmyshkin-sticky-js)
```

###  Alternatives

[jackiedo/dotenv-editor

The .env file editor tool for Laravel 5.8+

2061.3M33](/packages/jackiedo-dotenv-editor)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)