npm publish

README.md

@@ -0,0 +1,33 @@
+# Stacky.js #
+
+Create beautiful scrolling driven navigation lists with stacking headers that remain visible at all times. No dependency required - **just pure JavaScript!**
+
+## Getting Started ##
+
+
+### Example ###
+
+A minimal HTML structure for Stacky to work with can look something like this:
+
+```html
+<main>
+  <nav>
+    <section>
+      <header class="stacky">First header</header>
+      <p>Some content</p>
+    </section>
+    <section>
+      <header class="stacky">Second header</header>
+      <ul>
+        <li>First item</li>
+        <li>Second item</li>
+      </ul>
+    </section>
+    <!-- More sections here -->
+  </nav>
+</main>
+```
+
+## Credits ##
+
+Original jQuery plugin: [Slinky.js](https://github.com/iclanzan/slinky)

index.js

@@ -0,0 +1,79 @@
+class Stacky {
+  constructor(stackySelector=`.stacky`) {
+    this.headers = document.querySelectorAll(stackySelector)
+    this.headerArray = []
+  }
+
+  init() {
+    let i = 0
+    let j = headers.length - 1
+
+    this.headers.forEach(header => {
+      header.setAttribute(`data-stacky-id`, `${i}`)
+      header.setAttribute(`data-stacky-top`, `${i}`)
+      header.setAttribute(`data-stacky-bottom`, `${j}`)
+      this.headerArray.push({
+        el: header,
+        id: i,
+        orderTop: i,
+        orderBottom: j,
+        parent: header.parentElement,
+        height: header.clientHeight,
+        position: '',
+        offsetTop: header.clientHeight * i,
+        offsetBottom: header.clientHeight * j
+      })
+      i++
+      j--
+    })
+
+    window.addEventListener(`scroll`, el => {
+      this.headerArray.forEach(element => {
+        updateStack(element)
+      })
+    })
+  }
+
+  updateStack(element) {
+    let position = ``
+    const headerEl = document.querySelector(`[data-stacky-id="${element.id}"]`)
+    const rect = headerEl.parentElement.getBoundingClientRect()
+    const top = rect.top
+
+    if (top - (headerEl.clientHeight * element.orderTop) <= 0) {
+      position = `top`
+    } else if (top + (headerEl.clientHeight * (element.orderBottom + 1)) >= document.documentElement.clientHeight) {
+      position = `bottom`
+    }
+
+    if (position) {
+      if (position === `top`) {
+        element.position = `top`
+        headerEl.style.position = `fixed`
+        headerEl.style.top = `${element.offsetTop}px`
+        headerEl.style.bottom = ``
+        headerEl.parentElement.style.paddingTop = `${element.height}px`
+      } else if (position === `bottom`) {
+        element.position = `bottom`
+        headerEl.style.position = `fixed`
+        headerEl.style.top = ``
+        headerEl.style.bottom = `${element.offsetBottom}px`
+        headerEl.parentElement.style.paddingTop = `${element.height}px`
+      }
+    } else {
+      headerEl.style.position = ``
+      headerEl.style.top = ``
+      headerEl.style.width = ``
+      headerEl.parentElement.style.paddingTop = ``
+    }
+  }
+}
+
+export {
+  Stacky as default,
+  Stacky
+};
+
+if (typeof window !== 'undefined') {
+  window.Stacky = Stacky;
+}

package.json

@@ -0,0 +1,28 @@
+{
+  "name": "stacky.js",
+  "version": "1.0.0",
+  "description": "Stacking scrolling navigation, modern alternative to Slinky.js without no dependencies",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/matronator/stacky.js.git"
+  },
+  "keywords": [
+    "sticky",
+    "slinky",
+    "scrolling",
+    "nav",
+    "fixed",
+    "headers",
+    "navigation"
+  ],
+  "author": "Matronator",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/matronator/stacky.js/issues"
+  },
+  "homepage": "https://github.com/matronator/stacky.js#readme"
+}