loading...

re: Stop Using Fixed Headers and Start Using Sticky Ones VIEW POST

FULL DISCUSSION
 

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!

 

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!

 

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!

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

code of conduct - report abuse