fix scroll-position for in-page links relative to fixed header - #2762
Conversation
|
|
||
| // https://css-tricks.com/fixed-headers-on-page-links-and-overlapping-content-oh-my/ | ||
| html { | ||
| scroll-padding-top: calc(#{$TOPNAV_HEIGHT} + 24px); |
There was a problem hiding this comment.
24 was arbitrary but it felt nice to give it a tad more space. otherwise the text is right up against the bottom of the header.
|
Deploy preview for web-dev-staging ready! Built with commit ea22c72 |
|
IIRC we're putting a margin on headings to emulate this experience ( |
Yeah I would love to remove that and swap in this CSS. I had thought that this feature wasn't well supported but it seems to be. I'm not sure I understand the bit about Safari not supporting it on "fragment targets".. isn't that what we're linking to? But we can test it in Safari and see :D |
|
hm yeah it doesn't seem to work in safari :( |
|
to test, remove lines 74+ in _shared.scss |
|
What if we do something like this? |
|
This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 7 days if no further activity occurs. To prevent his from happening, leave a comment. |
|
Technically Safari does support |
|
Sooooooo I rebased the PR to just make our anchor padding hack have a bit more space because I can't figure out a good way to feature detect scroll-padding. But I would like to merge the change I made at least. |
THIS CSS IS AMAZING
https://css-tricks.com/fixed-headers-on-page-links-and-overlapping-content-oh-my/
Fixes #2598
cc @brendankenny
adding some keywords because i always have trouble refinding this property:
scroll under overlap offset sticky fixed header named anchors inpage hash