fix: When scrolling to an anchor, account for the header height (#158)

Fixes #146 * fix: When scrolling to an anchor, account for the header height * Fix scrolling for fewer elements * Fix scrolling for lists but limit the effects to the main content area * Nest the rules correctly
reuixiy · May 18, 2020 · 115914a · 115914a
1 parent 6ef35ec
commit 115914a
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 0 deletions.
diff --git a/assets/js/header.js b/assets/js/header.js
@@ -18,6 +18,16 @@ if (mainInner !== null) {
 headerInner.style.setProperty('opacity', 1);
 
 
+// Measure header height for the scrolling fix
+{
+    const header = document.querySelector('.header');
+    if (header) {
+        const headerHeight = window.getComputedStyle(header, null).getPropertyValue('height');
+        document.documentElement.style.setProperty('--header-height', headerHeight);
+    }
+}
+
+
 // Hide switcher's parentNode if it has `data-hide`
 
 function addDisplayNone(e) {

diff --git a/assets/scss/layout/_header.scss b/assets/scss/layout/_header.scss
@@ -33,12 +33,14 @@
     }
 }
 
+$brandHeight: null;
 @if ($siteBrandSVG) {
     .brand {
         width: $siteBrandSVGWidth;
         height: $siteBrandSVGHeight;
         fill: $siteBrandSVGFill;
     }
+    $brandHeight: $siteBrandSVGHeight;
 } @else {
     .brand {
         font-size: $siteBrandFontSize;
@@ -48,4 +50,36 @@
             color: $siteBrandFontColor;
         }
     }
+    $brandHeight: $siteBrandFontSize * /* body line height */ 1.618;
+}
+
+@if ($headerLayoutFlex) {
+    :root
+    {
+        /* This is an approximate calculation, it won't cover all scenarios */
+        --header-height: calc(
+            max(
+                /* menu */
+                #{$fontSize * /* .nav font size */ 0.8 * /* .menu line height */ 1.5},
+                /* brand */
+                #{$brandHeight}
+            ) + #{/* .header-wrapper top+bottom margin */ 2 * $fontSize}
+        );
+    }
+
+    /* Work-around for anchors being hidden below the header */
+    #main
+    {
+        p, div, ul, ol, form, section, h1, h2, h3, h4, h5, h6
+        {
+            &[id]::before
+            {
+                content: "";
+                display: block;
+                visibility: hidden;
+                height: var(--header-height);
+                margin: calc(-1 * var(--header-height)) 0 0;
+            }
+        }
+    }
 }