fix module exporting

dist/stacky.js

@@ -68,3 +68,7 @@ class Stacky {
  }
  }
 }
+
+if (typeof window !== 'undefined') {
+ window.Stacky = Stacky;
+}

index.js

@@ -69,11 +69,4 @@ class Stacky {
  }
 }
 
-export {
- Stacky as default,
- Stacky
-};
-
-if (typeof window !== 'undefined') {
- window.Stacky = Stacky;
-}
+module.exports.Stacky = Stacky

index.mjs

@@ -0,0 +1,72 @@
+class Stacky {
+ constructor(stackySelector=`header`) {
+ this.headers = document.querySelectorAll(stackySelector)
+ this.headerArray = []
+ }
+
+ init() {
+ let i = 0
+ let j = this.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 => {
+ this.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 }

package.json

@@ -1,6 +1,6 @@
 {
  "name": "stacky.js",
- "version": "1.0.3",
+ "version": "1.0.4",
  "description": "Stacking scrolling navigation, modern alternative to Slinky.js without no dependencies",
  "main": "index.js",
  "scripts": {
@@ -10,6 +10,7 @@
  "type": "git",
  "url": "git+https://github.com/matronator/stacky.js.git"
  },
+ "module": "index.mjs",
  "keywords": [
  "sticky",
  "slinky",