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

View post

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!

Luis Augusto • Jun 25 '20

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!

mark l chaves • Jun 25 '20

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!

Luis Augusto • Jun 25 '20

Awesome thanks for that, either way works!