Adds option for specifying the top offset

packages/@vuepress/plugin-active-header-links/index.js

@@ -4,6 +4,7 @@ module.exports = (options) => ({
   clientRootMixin: path.resolve(__dirname, 'mixin.js'),
   define: {
     AHL_SIDEBAR_LINK_SELECTOR: options.sidebarLinkSelector || '.sidebar-link',
-    AHL_HEADER_ANCHOR_SELECTOR: options.headerAnchorSelector || '.header-anchor'
+    AHL_HEADER_ANCHOR_SELECTOR: options.headerAnchorSelector || '.header-anchor',
+    AHL_TOP_OFFSET: options.headerTopOffset || 90
   }
 })

packages/@vuepress/plugin-active-header-links/mixin.js

@@ -1,4 +1,4 @@
-/* global AHL_SIDEBAR_LINK_SELECTOR, AHL_HEADER_ANCHOR_SELECTOR */
+/* global AHL_SIDEBAR_LINK_SELECTOR, AHL_HEADER_ANCHOR_SELECTOR, AHL_TOP_OFFSET */
 
 import throttle from 'lodash.throttle'
 
@@ -35,8 +35,8 @@ function getAnchors () {
       return {
         el,
         hash: decodeURIComponent(el.hash),
-        top: el.getBoundingClientRect().top - 90
-        /* 90 is to Subtract height of navbar & anchor's padding top */
+        top: el.getBoundingClientRect().top - AHL_TOP_OFFSET
+        /* AHL_TOP_OFFSET is to Subtract height of navbar & anchor's padding top */
       }
     })
 }

packages/docs/docs/plugin/official/plugin-active-header-links.md

@@ -18,7 +18,18 @@ yarn add -D @vuepress/plugin-active-header-links
 
 ```javascript
 module.exports = {
-  plugins: ['@vuepress/active-header-links'] 
+  plugins: ['@vuepress/active-header-links']
+}
+```
+
+### Passing Options
+```javascript
+module.exports = {
+  plugins: ['@vuepress/active-header-links', {
+    sidebarLinkSelector: '.sidebar-link',
+    headerAnchorSelector: '.header-anchor',
+    headerTopOffset: 120
+  }]
 }
 ```
 
@@ -32,5 +43,11 @@ module.exports = {
 ### headerAnchorSelector
 
 - Type: `string`
-- Default: `.header-anchor'`
+- Default: `.header-anchor`
+
+### headerTopOffset
+The number of pixels that you want the header to be from the top of the page before updating the url hash switch to that header.
+
+- Type: `integer`
+- Default: `90`