jormungandr-bite/packages/client/src/scripts/sticky-sidebar.ts
ThatOneCalculator 2aab2de38d refactor: 🎨 rome
2023-01-12 20:40:33 -08:00

82 lines
2 KiB
TypeScript

export class StickySidebar {
private lastScrollTop = 0;
private container: HTMLElement;
private el: HTMLElement;
private spacer: HTMLElement;
private marginTop: number;
private isTop = false;
private isBottom = false;
private offsetTop: number;
private globalHeaderHeight: number = 59;
constructor(
container: StickySidebar["container"],
marginTop = 0,
globalHeaderHeight = 0,
) {
this.container = container;
this.el = this.container.children[0] as HTMLElement;
this.el.style.position = "sticky";
this.spacer = document.createElement("div");
this.container.prepend(this.spacer);
this.marginTop = marginTop;
this.offsetTop = this.container.getBoundingClientRect().top;
this.globalHeaderHeight = globalHeaderHeight;
}
public calc(scrollTop: number) {
if (scrollTop > this.lastScrollTop) {
// downscroll
const overflow = Math.max(
0,
this.globalHeaderHeight +
(this.el.clientHeight + this.marginTop) -
window.innerHeight,
);
this.el.style.bottom = null;
this.el.style.top = `${
-overflow + this.marginTop + this.globalHeaderHeight
}px`;
this.isBottom =
scrollTop + window.innerHeight >=
this.el.offsetTop + this.el.clientHeight;
if (this.isTop) {
this.isTop = false;
this.spacer.style.marginTop = `${Math.max(
0,
this.globalHeaderHeight +
this.lastScrollTop +
this.marginTop -
this.offsetTop,
)}px`;
}
} else {
// upscroll
const overflow =
this.globalHeaderHeight +
(this.el.clientHeight + this.marginTop) -
window.innerHeight;
this.el.style.top = null;
this.el.style.bottom = `${-overflow}px`;
this.isTop =
scrollTop + this.marginTop + this.globalHeaderHeight <=
this.el.offsetTop;
if (this.isBottom) {
this.isBottom = false;
this.spacer.style.marginTop = `${
this.globalHeaderHeight +
this.lastScrollTop +
this.marginTop -
this.offsetTop -
overflow
}px`;
}
}
this.lastScrollTop = scrollTop <= 0 ? 0 : scrollTop;
}
}