Active sidebar link highlight

lib/default-theme/Layout.vue

@@ -29,6 +29,7 @@ import Page from './Page.vue'
 import Sidebar from './Sidebar.vue'
 import { pathToComponentName } from '@app/util'
 import { resolveSidebarItems } from './util'
+import throttle from 'lodash/throttle'
 
 export default {
   components: { Home, Page, Sidebar, Navbar },
@@ -111,6 +112,8 @@ export default {
     this.$watch('$page', updateMeta)
     updateMeta()
 
+    window.addEventListener('scroll', this.onScroll)
+
     // configure progress bar
     nprogress.configure({ showSpinner: false })
 
@@ -129,6 +132,8 @@ export default {
 
   beforeDestroy () {
     updateMetaTags(null, this.currentMetaTags)
+
+    window.removeEventListener('scroll', this.onScroll)
   },
 
   methods: {
@@ -152,7 +157,10 @@ export default {
           this.toggleSidebar(false)
         }
       }
-    }
+    },
+    onScroll: throttle(() => {
+      setActiveHash()
+    }, 200)
   }
 }
 
@@ -173,6 +181,35 @@ function updateMetaTags (meta, current) {
     })
   }
 }
+
+function setActiveHash () {
+  const anchors = gatherHeaderAnchors()
+
+  const scrollTop = Math.max(window.pageYOffset, document.documentElement.scrollTop, document.body.scrollTop)
+
+  for (let i = 0; i < anchors.length; i++) {
+    const anchor = anchors[i]
+    const nextAnchor = anchors[i + 1]
+
+    const isActive = i === 0 && scrollTop === 0 ||
+      (scrollTop >= anchor.parentElement.offsetTop + 10 &&
+        (typeof nextAnchor === 'undefined' || scrollTop < nextAnchor.parentElement.offsetTop - 10))
+
+    if (isActive && window.location.hash !== anchor.hash) {
+      window.location.hash = anchor.hash
+      return
+    }
+  }
+}
+
+function gatherHeaderAnchors () {
+  const sidebarLinks = Array.from(document.querySelectorAll('.sidebar-group-items a.sidebar-link'))
+
+  const anchors = Array.from(document.querySelectorAll('a.header-anchor'))
+    .filter(x => sidebarLinks.map(x => x.hash).includes(x.hash))
+
+  return anchors
+}
 </script>
 
 <style src="prismjs/themes/prism-tomorrow.css"></style>

package.json

@@ -59,6 +59,7 @@
     "koa-mount": "^3.0.0",
     "koa-static": "^4.0.2",
     "loader-utils": "^1.1.0",
+    "lodash.throttle": "^4.1.1",
     "lru-cache": "^4.1.2",
     "markdown-it": "^8.4.1",
     "markdown-it-anchor": "^4.0.0",