feat($active-header-links): add option for specifying the top offset (#…

…1005)
vuejs · Nov 16, 2018 · 100bbf2 · 100bbf2
1 parent dac42da
commit 100bbf2
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 6 deletions.
diff --git a/packages/@vuepress/plugin-active-header-links/index.js b/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
   }
 })
diff --git a/packages/@vuepress/plugin-active-header-links/mixin.js b/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 */
       }
     })
 }

diff --git a/packages/docs/docs/plugin/official/plugin-active-header-links.md b/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`