Will stick vertically element with class "sticky-item".
Usage is for Table > sticky cells, so this code check element left to create sticky groups.
.sticky-fixed { | |
position: fixed; | |
top: 5px; | |
background: white; | |
} |
const getElementAbsoluteOffset = (el) => { | |
var rect = el.getBoundingClientRect(), | |
scrollLeft = window.pageXOffset || document.documentElement.scrollLeft, | |
scrollTop = window.pageYOffset || document.documentElement.scrollTop; | |
return { top: rect.top + scrollTop, left: rect.left + scrollLeft } | |
} | |
export default class Sticky { | |
constructor() { | |
this.items = [] | |
this.handleWindowScroll = this.handleWindowScroll.bind(this) | |
} | |
start() { | |
this.end() | |
this.windowOnScrollListener = window.addEventListener("scroll", this.handleWindowScroll) | |
} | |
end() { | |
window.removeEventListener("scroll", this.handleWindowScroll) | |
} | |
handleWindowScroll(e) { | |
const windowY = window.pageYOffset | |
var lastStickyFound = {} | |
const items = [...document.getElementsByClassName("sticky-item")] | |
.map(element => ({ | |
...getElementAbsoluteOffset(element.parentElement.parentElement), | |
cell: element.parentElement.parentElement, | |
element: element, | |
classList: element.classList | |
})) | |
.sort((a, b) => b.top - a.top) | |
for (var i in items) { | |
const {classList, top, left} = items[i] | |
if (top <= windowY && !lastStickyFound.hasOwnProperty(left)) { | |
classList.add("sticky-fixed") | |
lastStickyFound[left] = "ok" | |
} else { | |
classList.remove("sticky-fixed") | |
} | |
} | |
} | |
} |