Best practice when making a header fixed/sticky?

[ramojej]

I've been searching a lot, but can't find the best way of making a header sticky/fixed. How do you guys go on this? Is there a specific amount of px from top to make your header sticky?

[thebuilder]

You really want to use position: sticky for this. Scroll events and Intersection Observers are async, and will cause elements to jump if you try to toggle their position in JavaScript (depending on device).

https://developer.mozilla.org/en-US/docs/Web/CSS/position#sticky_positioning
https://dev.to/akhilarjun/one-line-sticky-header-using-css-5gp3

[ramojej]

@thebuilder yes, but I'd like it to be somewhat customized (e.g. it will only be sticky when user scrolled 400px from top)... In jQuery, it's something like this:

$(window).scroll(function () {
      if ($(this).scrollTop() > 200) {
        $("header").addClass("navbar-shrink");
      } else {
        $("header").removeClass("navbar-shrink");
      }
    });

[thebuilder]

That's exactly what the CSS sticky prop does - you offset it by setting top:

position: sticky;
top: 400px;

[ramojej]

No, it doesn't. My header is initially absolutely positioned. Making it sticky with top 400px just makes my header in the center of the screen (vertically).

[thebuilder]

That sounds like a fixed header that gets updated when you reach a trigger point. There are a multitude of ways to accomplish this. A scroll event listener that toggles a useState Boolean would be the simple version. That would be similar to your jQuery code.

You can also achieve this with the Intersection Observer - one way would be to create an (invisible) element, on have it collapse the navigation once it leaves the viewport.

Complexity really depends on your needs.

[chirag04]

https://developers.google.com/web/updates/2017/09/sticky-headers