https://github.com/code-hemu/stickygum

sticky sidebar library with smooth scrolling and responsive support.
https://github.com/code-hemu/stickygum

Last synced: 4 days ago
JSON representation

sticky sidebar library with smooth scrolling and responsive support.

Host: GitHub
URL: https://github.com/code-hemu/stickygum
Owner: code-hemu
License: gpl-3.0
Created: 2026-06-26T16:35:52.000Z (12 days ago)
Default Branch: main
Last Pushed: 2026-06-27T19:10:28.000Z (11 days ago)
Last Synced: 2026-06-27T20:22:14.306Z (11 days ago)
Language: TypeScript
Size: 261 KB
Stars: 0
Watchers: 0
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

StickyGum is a JavaScript library for creating sticky sidebars. It keeps sidebars visible while scrolling, ensures they stay within their parent container, and automatically adapts to responsive layouts. Support for multiple sticky modes and smooth positioning, StickyGum works out of the box in modern browsers.

# Installation

Install StickyGum from npm:

```bash
npm install stickygum
```

# Getting Started

StickyGum supports Browser, ES Modules, and CommonJS.

## Browser (CDN)

```html

new StickyGum({
container: "#main-wrapper",
sidebar: "#sidebar-wrapper",
offsetTop: 30,
offsetBottom: 30
});

```

## ES Modules

```javascript
import StickyGum from "stickygum";

new StickyGum({
container: "#main-wrapper",
sidebar: "#sidebar-wrapper"
});
```

## CommonJS

```javascript
const StickyGum = require("stickygum");

new StickyGum({
container: "#main-wrapper",
sidebar: "#sidebar-wrapper"
});
```

# HTML Structure

Your sidebar should be placed inside the container that defines its scrolling boundary.

```html

Main content

Sidebar content

```

Once the container reaches its bottom edge, StickyGum stops the sidebar there instead of allowing it to scroll beyond the container.

# Options

All configuration is passed through the constructor.

| Option | Type | Default | Description |
| ---------------------------- | ------------------------------------------------- | -------------- | ----------------------------------------------------------------------- |
| `container` | `string \| HTMLElement` | Sidebar parent | Container that limits the sticky area. |
| `sidebar` | `string \| HTMLElement \| HTMLElement[]` | - | Sidebar element(s) to make sticky. |
| `offsetTop` | `number` | `0` | Space between the top of the viewport and the sidebar. |
| `offsetBottom` | `number` | `0` | Space between the bottom of the viewport and the sidebar. |
| `updateSidebarHeight` | `boolean` | `true` | Updates sidebar height dynamically while scrolling. |
| `minWidth` | `number` | `0` | Disables StickyGum below this viewport width. |
| `disableOnResponsiveLayouts` | `boolean` | `true` | Automatically disables sticky behavior when the layout becomes stacked. |
| `sidebarBehavior` | `"modern" \| "stick-to-top" \| "stick-to-bottom"` | `"modern"` | Controls how the sidebar behaves while scrolling. |
| `defaultPosition` | `string` | `"relative"` | Initial CSS position before StickyGum starts. |
| `verbose` | `boolean` | `false` | Logs helpful warnings during initialization. |

# Destroying an Instance

Call `unbind()` to remove all event listeners and restore the sidebar to its original state.

```javascript
const sticky = new StickyGum({
container: "#main-wrapper",
sidebar: "#sidebar-wrapper"
});

sticky.unbind();
```

This is especially useful when unmounting components in single-page applications.

# Package Entry Points

StickyGum provides separate builds for different environments.

```json
{
"main": "dist/stickygum.cjs",
"module": "dist/stickygum.esm.js",
"browser": "dist/stickygum.min.js",
"exports": {
".": {
"import": "./dist/stickygum.esm.js",
"require": "./dist/stickygum.cjs"
}
}
}
```

* **CommonJS** - `dist/stickygum.cjs`
* **ES Modules** - `dist/stickygum.esm.js`
* **Browser (IIFE)** - `dist/stickygum.min.js`

The browser build exposes a global `StickyGum` object, while bundlers automatically resolve the appropriate module through the `exports` field.

## License

ecosyste.ms

Data

Tools

Indexes

Applications

Experiments

Awesome

https://github.com/code-hemu/stickygum

Awesome Lists containing this project

README