DEV Community

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

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