@@ -29,6 +29,7 @@ import Page from './Page.vue'
29
29
import Sidebar from ' ./Sidebar.vue'
30
30
import { pathToComponentName } from ' @app/util'
31
31
import { resolveSidebarItems } from ' ./util'
32
+ import throttle from ' lodash.throttle'
32
33
33
34
export default {
34
35
components: { Home, Page, Sidebar, Navbar },
@@ -111,6 +112,8 @@ export default {
111
112
this .$watch (' $page' , updateMeta)
112
113
updateMeta ()
113
114
115
+ window .addEventListener (' scroll' , this .onScroll )
116
+
114
117
// configure progress bar
115
118
nprogress .configure ({ showSpinner: false })
116
119
@@ -129,6 +132,8 @@ export default {
129
132
130
133
beforeDestroy () {
131
134
updateMetaTags (null , this .currentMetaTags )
135
+
136
+ window .removeEventListener (' scroll' , this .onScroll )
132
137
},
133
138
134
139
methods: {
@@ -152,6 +157,30 @@ export default {
152
157
this .toggleSidebar (false )
153
158
}
154
159
}
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
+ }
155
184
}
156
185
}
157
186
}
0 commit comments