Skip to content

Commit 100bbf2

Browse files
brettererulivz
authored andcommitted
feat($active-header-links): add option for specifying the top offset (#1005)
1 parent dac42da commit 100bbf2

File tree

3 files changed

+24
-6
lines changed

3 files changed

+24
-6
lines changed

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

+2-1
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ module.exports = (options) => ({
44
clientRootMixin: path.resolve(__dirname, 'mixin.js'),
55
define: {
66
AHL_SIDEBAR_LINK_SELECTOR: options.sidebarLinkSelector || '.sidebar-link',
7-
AHL_HEADER_ANCHOR_SELECTOR: options.headerAnchorSelector || '.header-anchor'
7+
AHL_HEADER_ANCHOR_SELECTOR: options.headerAnchorSelector || '.header-anchor',
8+
AHL_TOP_OFFSET: options.headerTopOffset || 90
89
}
910
})

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

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
/* global AHL_SIDEBAR_LINK_SELECTOR, AHL_HEADER_ANCHOR_SELECTOR */
1+
/* global AHL_SIDEBAR_LINK_SELECTOR, AHL_HEADER_ANCHOR_SELECTOR, AHL_TOP_OFFSET */
22

33
import throttle from 'lodash.throttle'
44

@@ -35,8 +35,8 @@ function getAnchors () {
3535
return {
3636
el,
3737
hash: decodeURIComponent(el.hash),
38-
top: el.getBoundingClientRect().top - 90
39-
/* 90 is to Subtract height of navbar & anchor's padding top */
38+
top: el.getBoundingClientRect().top - AHL_TOP_OFFSET
39+
/* AHL_TOP_OFFSET is to Subtract height of navbar & anchor's padding top */
4040
}
4141
})
4242
}

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

+19-2
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,18 @@ yarn add -D @vuepress/plugin-active-header-links
1818

1919
```javascript
2020
module.exports = {
21-
plugins: ['@vuepress/active-header-links']
21+
plugins: ['@vuepress/active-header-links']
22+
}
23+
```
24+
25+
### Passing Options
26+
```javascript
27+
module.exports = {
28+
plugins: ['@vuepress/active-header-links', {
29+
sidebarLinkSelector: '.sidebar-link',
30+
headerAnchorSelector: '.header-anchor',
31+
headerTopOffset: 120
32+
}]
2233
}
2334
```
2435

@@ -32,5 +43,11 @@ module.exports = {
3243
### headerAnchorSelector
3344

3445
- Type: `string`
35-
- Default: `.header-anchor'`
46+
- Default: `.header-anchor`
47+
48+
### headerTopOffset
49+
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.
50+
51+
- Type: `integer`
52+
- Default: `90`
3653

0 commit comments

Comments
 (0)