https://github.com/matronator/stacky.js

Stacking scrolling navigation, modern alternative to Slinky.js without any dependency
https://github.com/matronator/stacky.js

fixed headers javascript navigation npm slinky stacking-panels stacky sticky sticky-headers vanilla-javascript vanilla-js

Last synced: 12 days ago
JSON representation

Stacking scrolling navigation, modern alternative to Slinky.js without any dependency

• Host: GitHub
• URL: https://github.com/matronator/stacky.js
• Owner: matronator
• License: mit
• Created: 2020-04-30T22:38:18.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2022-08-04T09:00:51.000Z (over 2 years ago)
• Last Synced: 2024-10-11T19:49:04.555Z (28 days ago)
• Topics: fixed, headers, javascript, navigation, npm, slinky, stacking-panels, stacky, sticky, sticky-headers, vanilla-javascript, vanilla-js
• Language: JavaScript
• Size: 27.3 KB
• Stars: 5
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

        


# Stacky.js

Create beautiful scrolling driven navigation lists with stacking headers that remain visible at all times.

Vanilla JS alternative to [Slinky.js](https://github.com/iclanzan/slinky) with no dependencies.

You can see demo here: https://matronator.github.io/stacky.js/

## Getting Started

### Instalation

#### NPM

Instal with

```

npm install stacky.js

```

and import into your project

```javascript

import Stacky from "stacky.js"

```

#### Browser

Download files from the [dist folder](https://github.com/matronator/stacky.js/tree/master/dist) and include in your HTML file

```html

```

### Example

A minimal HTML structure for Stacky to work with can look something like this:

```html

  

    

      First header

      
Some content

    

    

      Second header

      


        
First item

        
Second item

      

    

    

  


```

Then you just initialize Stacky like this:

```javascript

const stacky = new Stacky()

stacky.init()

```

Stacky.js looks for `` tags by default, but you can change it to any CSS selector you want.

For example if you want to use Stacky on headings with some custom class like this one:

```html

Heading

```


You just have to specify the selector when declaring Stacky like so:

```javascript

const stacky = new Stacky('h2.stack-me')

stacky.init()

```

## Credits

Original jQuery plugin: [Slinky.js](https://github.com/iclanzan/slinky)