{"id":5302,"date":"2021-09-20T16:19:01","date_gmt":"2021-09-20T15:19:01","guid":{"rendered":"https:\/\/solidt.eu\/site\/?p=5302"},"modified":"2021-09-20T16:19:26","modified_gmt":"2021-09-20T15:19:26","slug":"typescript-register-sticky-for-when-it-does-not-work","status":"publish","type":"post","link":"https:\/\/solidt.eu\/site\/typescript-register-sticky-for-when-it-does-not-work\/","title":{"rendered":"Typescript register sticky (for when CSS sticky does not work)"},"content":{"rendered":"\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"typescript\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">import { IEventSubscription } from \"..\/domain\/events\/IEventHandler\";\n\nexport function registerSticky(el: HTMLElement): IEventSubscription {\n    el.style.position = \"relative\";\n    let parent: HTMLElement | null = el.parentElement;\n    while (true) {\n        if (!parent) break;\n        if ([\"auto\", \"scroll\", \"hidden\"].includes(getComputedStyle(parent).overflow)) break;\n        if (parent === parent.parentElement) break;\n        parent = parent.parentElement;\n    }\n    if (!parent) throw new Error(\"no parent found\");\n\n    function scrollEvent(e?: Event) {\n        if (!parent) return;\n        const newTop = Math.max(0, parent.scrollTop);\n        el.style.top = `${newTop}px`;\n    }\n\n    parent.addEventListener(\"scroll\", scrollEvent);\n    scrollEvent();\n    return { unsubscribe: () => parent!.removeEventListener(\"scroll\", scrollEvent) };\n}\n<\/pre>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-5302","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts\/5302","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/comments?post=5302"}],"version-history":[{"count":2,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts\/5302\/revisions"}],"predecessor-version":[{"id":5304,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts\/5302\/revisions\/5304"}],"wp:attachment":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/media?parent=5302"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/categories?post=5302"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/tags?post=5302"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}