Typescript register sticky (for when CSS sticky does not work)

Date: 2021-09-20
import { IEventSubscription } from "../domain/events/IEventHandler";

export function registerSticky(el: HTMLElement): IEventSubscription {
    el.style.position = "relative";
    let parent: HTMLElement | null = el.parentElement;
    while (true) {
        if (!parent) break;
        if (["auto", "scroll", "hidden"].includes(getComputedStyle(parent).overflow)) break;
        if (parent === parent.parentElement) break;
        parent = parent.parentElement;
    }
    if (!parent) throw new Error("no parent found");

    function scrollEvent(e?: Event) {
        if (!parent) return;
        const newTop = Math.max(0, parent.scrollTop);
        el.style.top = `${newTop}px`;
    }

    parent.addEventListener("scroll", scrollEvent);
    scrollEvent();
    return { unsubscribe: () => parent!.removeEventListener("scroll", scrollEvent) };
}
53020cookie-checkTypescript register sticky (for when CSS sticky does not work)