You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 4-6.RSVP
Socket
Book a DemoInstallSign in
Socket

stacky.js

Package Overview
Dependencies
Maintainers
1
Versions
5
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

stacky.js - npm Package Compare versions

Comparing version

to
1.0.3

.github/FUNDING.yml

2

index.js
class Stacky {
constructor(stackySelector=`.stacky`) {
constructor(stackySelector=`header`) {
this.headers = document.querySelectorAll(stackySelector)

@@ -4,0 +4,0 @@ this.headerArray = []

{
"name": "stacky.js",
"version": "1.0.2",
"version": "1.0.3",
"description": "Stacking scrolling navigation, modern alternative to Slinky.js without no dependencies",

@@ -5,0 +5,0 @@ "main": "index.js",

# Stacky.js
Create beautiful scrolling driven navigation lists with stacking headers that remain visible at all times. No dependency required - **just pure JavaScript!**
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
### npm
### Instalation
`npm install stacky.js`
#### NPM
Instal with `npm install stacky.js` and import into your project `import Stacky from "stacky.js"`
#### Browser
Download the files from the [dist folder](https://github.com/matronator/stacky.js/tree/master/dist) and include in your HTML file `<script src="path/to/stacky.min.js"></script>`
### Example

@@ -20,7 +29,7 @@

<section>
<header class="stacky">First header</header>
<header>First header</header>
<p>Some content</p>
</section>
<section>
<header class="stacky">Second header</header>
<header>Second header</header>
<ul>

@@ -36,4 +45,20 @@ <li>First item</li>

Then you just initialize Stacky like this:
```javascript
const stacky = new Stacky()
stacky.init()
```
Stacky.js initializes on `<header>` tags by default, but you can change it to any CSS selector you want.
For example if you want initialize on headings with a specific class, like `<h2 class="stack-me">Heading</h2>` you just have to specify the selector like this:
```javascript
const stacky = new Stacky('h2.stack-me')
stacky.init()
```
## Credits
Original jQuery plugin: [Slinky.js](https://github.com/iclanzan/slinky)

Sorry, the diff of this file is not supported yet