Thanks for the article. Do you have a live code sample? I tried this a few times and I couldn't get it to work for me.
For example, in this pen, I disabled the CSS that compensates for my previous fixed header. Then, I changed my header to position sticky. No luck. All my anchors get hidden under the sticky header.
What am I doing wrong?
Hey Mark, thanks for reading! I took a look at the code and the sticky position does seem to be working, but are you referring to the tabs hiding under the header when you click on the anchor links? That is because anchor links will always bring that particular element to the very top of the page view, so regardless of whether you have a fixed or sticky header, it will always appear underneath when using an anchor link.
To get around anchor links jumping elements to the top of the page, you can add an offset to your #tabstrip element, like so:
I hope that helps!
Got it. It's also my (mis)understanding of how sticky is supposed to work then. I appreciate that.
BTW, I use this snippet from SE to automatically compensate for fixed headers when using anchors.
margin: -6rem 0 0;
Awesome thanks for that, either way works!
Wow... that ::before solution is brilliant. I think I knew about the :target selector, but I'd completely forgotten. And here I was setting event handlers on load and hashchange to fix the scroll position.
(I think the ::before solution is better than #tabstrip because #tabstrip would get mess up background colors on a targeted element.)
There's still a minor issue, being that this doesn't account for a top bar with dynamic height, but I guess that's a small enough issue that I'll switch away from my kludgy JS :)
We're a place where coders share, stay up-to-date and grow their careers.
We strive for transparency and don't collect excess data.