Comparing version
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
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
15259
44.54%10
42.86%268
30.73%63
65.79%1
Infinity%