https://github.com/informatix8/glue-stack

Sticks a hierarchy of elements within the viewport instead of scrolling out of view.
https://github.com/informatix8/glue-stack

hc-sticky position-sticky sticky sticky-elements sticky-headings vanilla-javascript vanillajs

Last synced: about 1 month ago
JSON representation

Sticks a hierarchy of elements within the viewport instead of scrolling out of view.

• Host: GitHub
• URL: https://github.com/informatix8/glue-stack
• Owner: informatix8
• Created: 2019-08-14T16:56:46.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2019-09-10T14:57:19.000Z (over 5 years ago)
• Last Synced: 2024-12-17T05:57:25.779Z (about 2 months ago)
• Topics: hc-sticky, position-sticky, sticky, sticky-elements, sticky-headings, vanilla-javascript, vanillajs
• Language: HTML
• Homepage:
• Size: 17.6 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Glue Stack

Sticks a hierarchy of elements within the viewport instead of scrolling out of view.

## Features

- Sticky elements are replaced by their peer when a peer collides with it (pushing up from the bottom).

- Child sticky elements are replaced by their parents’ siblings (i.e. uncles, great uncles) when they collide.

## Dependencies

1. glue-stick

## Usage

### Install

```shell

npm install @informatix8/glue-stack --save-dev

```

### CDN

```html

```

### Vanilla Javascript

```javascript

new GlueStack({

    mainContainer: document.querySelector('.main-container'),

    hierarchySelectors: ['h1', 'h2', 'h3'],

    zIndex: 1000

});

```

## Development

```shell

npm run dev

```

## Build

```shell

npm run build

```

## Release

```shell

npm run build

git tag -a vX.Y.Z

git push origin master

git push origin --tags

npm publish --access=public .

```