fix: TOC scrolls with view

Ticket: ENT-11202 Changelog: None Signed-off-by: Mikita Pilinka <[email protected]>
cfengine · Feb 13, 2024 · 32993a9 · 32993a9
1 parent 1f131a1
commit 32993a9
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 3 deletions.
diff --git a/generator/_assets/js/custom.js b/generator/_assets/js/custom.js
@@ -388,19 +388,24 @@ document.addEventListener("DOMContentLoaded", function () {
 
                 for (let i = anchorsOffsets.length - 1; i >= 0; i--) {
                     if (scrollTop > anchorsOffsets[i]) {
-                        setActiveLink(anchors[i].id);
+                        setActiveLink(anchors[i].id, i);
                         break;
                     }
                 }
             }, 50); // 0.05s threshold
 
         }
 
-        const setActiveLink = (id) => {
+        const setActiveLink = (id, n) => {
             const activeLink = document.querySelector(`#TOCbox_list li a[href$="#${id}"]`);
             if (activeLink) {
                 activeLink.classList.add('current');
             }
+            const tocWrapper = document.getElementById('TOCbox_wrapper');
+            const TOC_TOP_OFFSET = 42;
+            const LI_HEIGHT = 30;
+            const selectedOffset = window.innerHeight-TOC_TOP_OFFSET - (LI_HEIGHT * (n + 1))
+            tocWrapper.style.top = (selectedOffset < 0 ? 12 + selectedOffset : 12) + 'px';
         }
 
         window.addEventListener('scroll', updateActiveTocItem);

diff --git a/generator/_assets/styles/less/pages.less b/generator/_assets/styles/less/pages.less
@@ -70,7 +70,7 @@
     position: sticky;
     top: 12px;
     font-family: "Roboto", Arial, sans-serif;
-
+    transition: top 750ms ease 0s;
     @media @desktop-down {
       max-width: 28rem;
       margin-bottom: 2.4rem;