DEV Community

Discussion on: Stop Using Fixed Headers and Start Using Sticky Ones

Collapse
marklchaves profile image
mark l chaves

Hi Luis,

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.

codepen.io/marklchaves/full/XWXgQJM

I checked to make sure my JS wasn't doing anything funky. I added the plain vanillla HTML anchor also just to make sure it wasn't my JavaScript.

What am I doing wrong?

Thanks!

Collapse
luisaugusto profile image
Luis Augusto Author

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:

#tabstrip {
  margin-top: -100px;
  padding-top: 100px;
}

I hope that helps!

Collapse
marklchaves profile image
mark l chaves

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.

:target::before {
    content: "";
    display: block;
    height: 6rem; 
    margin: -6rem 0 0; 
}

Thanks again!

Thread Thread
luisaugusto profile image
Luis Augusto Author

Awesome thanks for that, either way works!

Thread Thread
yujiri8 profile image
Ryan Westlund

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 :)