fix: When scrolling to an anchor, account for the header height (fixes #146) #158
Conversation
| @@ -18,6 +18,16 @@ if (mainInner !== null) { | |||
| headerInner.style.setProperty('opacity', 1); | |||
|
|
|||
|
|
|||
| // Measure header height for the scrolling fix | |||
| { | |||
There was a problem hiding this comment.
The block here is necessary to avoid declaring constants at the top level of the script - this will conflict with another declaration of const header elsewhere. It might generally be a good idea to wrap each script file in a block to give it its own scope - this will make sure there are no conflicts between declarations in different script files.
assets/scss/layout/_header.scss
Outdated
| ); | ||
|
|
||
| /* Work-around for anchors being hidden below the header */ | ||
| p, div, ul, form, main, footer, nav, section, h1, h2, h3, h4, h5, h6 |
There was a problem hiding this comment.
Wait, I don't think we need to select so many elements - this may cause some bugs, such as the one I found on your site:
So maybe just headings?
|
It isn't just headings - there is scrolling to footnotes and other elements as well. I shortened the list but I'm not quite happy with lists not being on there. Maybe a better solution would be limiting this to |
|
Agreed. It would be better to limit this to |
|
There you go, done. |
|
Noticed that I had all the rules defined within |
This implements the work-around described in #146. Since the header height has to be known, this will do an approximate calculation of the header height in CSS (already works well enough for me under most circumstances). The header will then be measured precisely by JavaScript if enabled.