Skip to content

Commit 6b6d268

Browse files
ryanrivestulivz
authored andcommitted
feat: highlight current region in sidebar (#272)
1 parent 2d6f02f commit 6b6d268

File tree

3 files changed

+31
-1
lines changed

3 files changed

+31
-1
lines changed

lib/app/app.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@ export function createApp () {
5757
if (saved) {
5858
return saved
5959
} else if (to.hash) {
60-
return { selector: to.hash }
60+
return false
6161
} else {
6262
return { x: 0, y: 0 }
6363
}

lib/default-theme/Layout.vue

+29
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ import Page from './Page.vue'
2929
import Sidebar from './Sidebar.vue'
3030
import { pathToComponentName } from '@app/util'
3131
import { resolveSidebarItems } from './util'
32+
import throttle from 'lodash.throttle'
3233
3334
export default {
3435
components: { Home, Page, Sidebar, Navbar },
@@ -111,6 +112,8 @@ export default {
111112
this.$watch('$page', updateMeta)
112113
updateMeta()
113114
115+
window.addEventListener('scroll', this.onScroll)
116+
114117
// configure progress bar
115118
nprogress.configure({ showSpinner: false })
116119
@@ -129,6 +132,8 @@ export default {
129132
130133
beforeDestroy () {
131134
updateMetaTags(null, this.currentMetaTags)
135+
136+
window.removeEventListener('scroll', this.onScroll)
132137
},
133138
134139
methods: {
@@ -152,6 +157,30 @@ export default {
152157
this.toggleSidebar(false)
153158
}
154159
}
160+
},
161+
onScroll: throttle(function () {
162+
this.setActiveHash()
163+
}, 300),
164+
setActiveHash () {
165+
const sidebarLinks = [].slice.call(document.querySelectorAll('.sidebar-link'))
166+
const anchors = [].slice.call(document.querySelectorAll('.header-anchor'))
167+
.filter(anchor => sidebarLinks.some(sidebarLink => sidebarLink.hash === anchor.hash))
168+
169+
const scrollTop = Math.max(window.pageYOffset, document.documentElement.scrollTop, document.body.scrollTop)
170+
171+
for (let i = 0; i < anchors.length; i++) {
172+
const anchor = anchors[i]
173+
const nextAnchor = anchors[i + 1]
174+
175+
const isActive = i === 0 && scrollTop === 0 ||
176+
(scrollTop >= anchor.parentElement.offsetTop + 10 &&
177+
(!nextAnchor || scrollTop < nextAnchor.parentElement.offsetTop - 10))
178+
179+
if (isActive && this.$route.hash !== anchor.hash) {
180+
this.$router.replace(anchor.hash)
181+
return
182+
}
183+
}
155184
}
156185
}
157186
}

package.json

+1
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,7 @@
5959
"koa-mount": "^3.0.0",
6060
"koa-static": "^4.0.2",
6161
"loader-utils": "^1.1.0",
62+
"lodash.throttle": "^4.1.1",
6263
"lru-cache": "^4.1.2",
6364
"markdown-it": "^8.4.1",
6465
"markdown-it-anchor": "^4.0.0",

0 commit comments

Comments
 (0)