fix: when scrolling to a heading, prevent navbar from hiding badges b…

…efore that heading

Also lays some of the groundwork for an auto-hiding navbar.

scripts/scrollanchor.js

@@ -23,14 +23,33 @@ import ease from 'easy-ease';
     PAGE_UP: 'PageUp',
     SPACE: 'Space',
   };
+  const NAVBAR_SCROLL_MARGIN_VAR = '--navbar-scroll-margin';
 
-  function adjustForNavbar(px) {
-    const navbar = document.getElementsByClassName('jsdoc-navbar')[0];
-    const rect = navbar.getBoundingClientRect();
-    // Round height up to the nearest multiple of 5.
-    const adjustedNavbarHeight = Math.ceil(rect.height / 5) * 5;
+  function remToPx(rem, bodyStyle) {
+    rem = Number(rem.replace('rem', ''));
 
-    return px - adjustedNavbarHeight;
+    return rem * parseFloat(bodyStyle.fontSize);
+  }
+
+  function adjustForNavbar(target, px) {
+    const bodyStyle = getComputedStyle(document.body);
+    let scrollMargin;
+
+    // Use the element-specific margin if one is defined.
+    if (target) {
+      scrollMargin = getComputedStyle(target).getPropertyValue(NAVBAR_SCROLL_MARGIN_VAR);
+    }
+    // Fall back on the standard margin if necessary.
+    if (!scrollMargin) {
+      scrollMargin = bodyStyle.getPropertyValue(NAVBAR_SCROLL_MARGIN_VAR);
+    }
+
+    // Get margin in pixels.
+    scrollMargin = remToPx(scrollMargin, bodyStyle);
+    // Round margin up to the nearest multiple of 5.
+    scrollMargin = Math.ceil(scrollMargin / 5) * 5;
+
+    return px - scrollMargin;
   }
 
   function easeToY(endValue) {
@@ -56,7 +75,7 @@ import ease from 'easy-ease';
     target = document.getElementById(id);
     if (target) {
       event.preventDefault();
-      easeToY(adjustForNavbar(target.offsetTop));
+      easeToY(adjustForNavbar(target, target.offsetTop));
       window.history.pushState(null, null, historyItem);
     }
   }
@@ -91,7 +110,7 @@ import ease from 'easy-ease';
 
     event.preventDefault();
     event.stopImmediatePropagation();
-    scrollBy = adjustForNavbar(window.innerHeight);
+    scrollBy = adjustForNavbar(null, window.innerHeight);
 
     switch (code) {
       case KEY_CODES.PAGE_UP:

styles/baseline.scss

@@ -35,6 +35,11 @@
   }
 }
 
+:root {
+  --navbar-scroll-margin: #{navbar.$height + spacers.$medium};
+  --navbar-scroll-margin-large: #{navbar.$height + spacers.$xx-large};
+}
+
 html {
   position: relative;
   height: 100%;
@@ -238,6 +243,12 @@ dd > p {
   flex: 1 1 auto;
   height: 100%;
   padding: spacers.$xx-large;
+
+  // If there are badges before an element, then make sure the navbar doesn't cover the badges when
+  // the user scrolls to that element.
+  .symbol-detail-badges + [id] {
+    --navbar-scroll-margin: var(--navbar-scroll-margin-large);
+  }
 }
 
 .jsdoc-footer {