Sticky menus

Author: slowcheetah

web/scripts/build.mjs

@@ -143,13 +143,13 @@ async function build() {
         const headings = getHeadingList().filter(({ level }) => level > 1);
         return `
 <div class="wrapper">
-    <div class="docs-menu">
+    <div class="docs-menu sticky">
         ${isBlog ? blogMenu : docsMenu}
     </div>
     <div class="content">
         ${html}
     </div>
-    <div class="table-of-contents">
+    <div class="table-of-contents sticky">
         ${headings.map(({ id, raw, level }) => `<div class="toc-link"><a href="${htmlFileName}#${id}" class="h${level}">${raw}</a></div>`).join('\n')}
     </div>
 </div>`;

web/src/js/main.js

@@ -19,6 +19,7 @@ document.addEventListener('DOMContentLoaded', function(_event) {
   const dropdownTriggers = document.querySelectorAll(".dropdown .dropdown-wrapper > a");
   const currentVersion = document.querySelector('.versions-menu a.current');
   const dropdownBackdrop = document.querySelector('.dropdown .backdrop');
+  const stickyBlocks = document.querySelectorAll('.sticky');
 
   function toggleMenu() {
     menu.classList.toggle('active');
@@ -55,6 +56,29 @@ document.addEventListener('DOMContentLoaded', function(_event) {
     this.parentElement.classList.remove('active');
   })
 
+  function addStuck() {
+    stickyBlocks.forEach(stickyBlock => {
+      stickyBlock.classList.add('stuck');
+    });
+  }
+  function removeStuck() {
+    stickyBlocks.forEach(stickyBlock => {
+      stickyBlock.classList.remove('stuck');
+    });
+  }
+  let stuck = window.scrollY > 170;
+  if (stuck) addStuck();
+  window.addEventListener('scroll', () => {
+    if (!stuck && window.scrollY > 170) {
+      stuck = true;
+      addStuck();
+    }
+    if (stuck && window.scrollY <= 170) {
+      stuck = false;
+      removeStuck();
+    }
+  });
+
   hljs.addPlugin(new RunButtonPlugin());
   hljs.highlightAll();
 });

web/src/scss/parts/main.scss

@@ -64,17 +64,24 @@ main {
 
       .docs-menu {
         position: sticky;
-        top: 2rem;
+        top: 1rem;
         align-self: flex-start;
 
-        padding: 1rem 0.5rem 1rem 0;
+        padding: 0 0.5rem 1rem 0;
 
         font-size: 0.875rem;
         flex-basis: 20%;
         flex-shrink: 0;
         line-height: 1.3;
 
         border-right: 1px solid $border-color-lighter;
+        height: calc(100vh - 170px);
+        overflow-y: auto;
+        scrollbar-width: none;
+
+        &.stuck {
+          height: calc(100vh - 2rem);
+        }
 
         @include media('max', 'lg') {
           display: none;
@@ -127,10 +134,17 @@ main {
 
       .table-of-contents {
         position: sticky;
-        top: 2rem;
+        top: 1rem;
         align-self: flex-start;
         font-size: 0.875rem;
         max-width: 20%;
+        height: calc(100vh - 170px);
+        overflow-y: auto;
+        scrollbar-width: none;
+
+        &.stuck {
+          height: calc(100vh - 2rem);
+        }
 
         @include media('max', 'xl') {
           display: none;