Fix anchor offsets for nav blurring

material/base.html

@@ -36,7 +36,7 @@
       {% include "partials/webfonts.html" %}
     {% endblock %}
     {% block styles %}
-      <link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-990f733f65.css">
+      <link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-64b114333a.css">
       {% if config.extra.palette %}
         <link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-535e87ca3f.palette.css">
       {% endif %}
@@ -106,7 +106,7 @@
           <script src="https://cdn.mathjax.org/{{ path }}"></script>
         {% endif %}
       {% endfor %}
-      <script src="{{ base_url }}/assets/javascripts/application-0df6fd955b.js"></script>
+      <script src="{{ base_url }}/assets/javascripts/application-34d9ef09a7.js"></script>
       <script>
         /* Configuration for application */
         var config = {

mkdocs.yml

@@ -71,7 +71,6 @@ markdown_extensions:
   - pymdownx.tasklist(custom_checkbox=true)
   - pymdownx.tilde
 
-
 # Page tree
 pages:
   - Material: index.md

src/assets/javascripts/components/Material/Nav/Blur.js

@@ -41,9 +41,10 @@ export default class Blur {
     this.index_  = 0
     this.offset_ = window.pageYOffset
 
-    /* Index anchor nodes for fast lookup */
+    /* Index anchor node offsets for fast lookup, and deduct the static offset
+       of the header (56px) and sidebar offset (24px), see _permalinks.scss */
     this.anchors_ = [].map.call(this.els_, el => {
-      return document.querySelector(el.hash)
+      return document.querySelector(el.hash).offsetTop - (56 + 24)
     })
   }
 
@@ -67,7 +68,7 @@ export default class Blur {
     /* Scroll direction is down */
     if (this.offset_ <= offset) {
       for (let i = this.index_ + 1; i < this.els_.length; i++) {
-        if (this.anchors_[i].offsetTop <= offset) {
+        if (this.anchors_[i] <= offset) {
           if (i > 0)
             this.els_[i - 1].dataset.mdState = "blur"
           this.index_ = i
@@ -79,7 +80,7 @@ export default class Blur {
     /* Scroll direction is up */
     } else {
       for (let i = this.index_; i >= 0; i--) {
-        if (this.anchors_[i].offsetTop > offset) {
+        if (this.anchors_[i] > offset) {
           if (i > 0)
             delete this.els_[i - 1].dataset.mdState
         } else {

src/assets/stylesheets/extensions/_permalinks.scss

@@ -52,6 +52,12 @@
   // All headers with permalinks have ids
   [id] {
 
+    // Add spacing to anchor for offset
+    &::before {
+      display: block;
+      content: "";
+    }
+
     // Make permalink visible on hover
     &:hover  .headerlink,
     &:target .headerlink,
@@ -68,7 +74,7 @@
     }
   }
 
-  // Correct anchor offset of active targets
+  // Correct anchor offset for link blurring
   @each $level, $delta in (
     h1: 3.0rem,
     h2: 0.2rem,
@@ -77,11 +83,17 @@
     h5: 1.0rem,
     h6: 1.0rem
   ) {
+
+    // Un-targeted anchor
+    #{$level}[id]::before {
+      margin-top: -$delta;
+      padding-top: $delta;
+    }
+
+    // Targeted anchor (56px from header, 24px from sidebar offset)
     #{$level}[id]:target::before {
-      display: block;
       margin-top: -(5.6rem + 2.4rem + $delta);
       padding-top: (5.6rem + 2.4rem + $delta);
-      content: "";
     }
   }
 }