yumechi-no-kuni/packages/frontend/src/scripts/sticky-sidebar.ts

51 lines
1.8 KiB
TypeScript
Raw Normal View History

2020-07-06 02:08:30 -05:00
export class StickySidebar {
private lastScrollTop = 0;
private container: HTMLElement;
2020-07-06 02:08:30 -05:00
private el: HTMLElement;
private spacer: HTMLElement;
private marginTop: number;
private isTop = false;
private isBottom = false;
private offsetTop: number;
2023-01-09 20:34:06 -06:00
private globalHeaderHeight = 59;
2020-07-06 02:08:30 -05:00
2021-07-18 21:36:35 -05:00
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);
2020-07-06 02:08:30 -05:00
this.marginTop = marginTop;
this.offsetTop = this.container.getBoundingClientRect().top;
2021-07-18 21:36:35 -05:00
this.globalHeaderHeight = globalHeaderHeight;
2020-07-06 02:08:30 -05:00
}
public calc(scrollTop: number) {
if (scrollTop > this.lastScrollTop) { // downscroll
2021-07-18 21:36:35 -05:00
const overflow = Math.max(0, this.globalHeaderHeight + (this.el.clientHeight + this.marginTop) - window.innerHeight);
2020-07-06 02:08:30 -05:00
this.el.style.bottom = null;
2021-07-18 21:36:35 -05:00
this.el.style.top = `${-overflow + this.marginTop + this.globalHeaderHeight}px`;
2020-07-06 02:08:30 -05:00
this.isBottom = (scrollTop + window.innerHeight) >= (this.el.offsetTop + this.el.clientHeight);
if (this.isTop) {
this.isTop = false;
2021-07-18 21:36:35 -05:00
this.spacer.style.marginTop = `${Math.max(0, this.globalHeaderHeight + this.lastScrollTop + this.marginTop - this.offsetTop)}px`;
2020-07-06 02:08:30 -05:00
}
} else { // upscroll
2021-07-18 21:36:35 -05:00
const overflow = this.globalHeaderHeight + (this.el.clientHeight + this.marginTop) - window.innerHeight;
2020-07-06 02:08:30 -05:00
this.el.style.top = null;
this.el.style.bottom = `${-overflow}px`;
2020-07-06 02:08:30 -05:00
2021-07-18 21:36:35 -05:00
this.isTop = scrollTop + this.marginTop + this.globalHeaderHeight <= this.el.offsetTop;
2020-07-06 02:08:30 -05:00
if (this.isBottom) {
this.isBottom = false;
2021-07-18 21:36:35 -05:00
this.spacer.style.marginTop = `${this.globalHeaderHeight + this.lastScrollTop + this.marginTop - this.offsetTop - overflow}px`;
2020-07-06 02:08:30 -05:00
}
}
this.lastScrollTop = scrollTop <= 0 ? 0 : scrollTop;
}
}