How to keep the header static, always on top while scrolling?

html

responsive-design

css

sticky-header

byAnton Shumikhin·Nov 18, 2024

Lock up your header on page top in CSS-jail using position: fixed; and top: 0; - this ensures it stays in plain sight no matter how much you scroll. To be sure it's not lost behind other content, give it a VIP ticket with a high z-index value:

.header {
  position: fixed;
  top: 0;
  width: 100%;  /* Because the header deserves all attention  😉 */
  z-index: 1000; /* Over 9000!!! */
}

Integrate this styling to your page header:

<div class="header">I Am On Top Of The World!</div>

Add an appropriate margin-top to your page content equivalent to the height of your header - maintaining a safe distance, just like socially-distanced elements.

How to: Options and considerations

For a more dynamic approach, consider position: sticky;. This sets your header free to move until it reaches a specified threshold, at which point it's on house arrest like this:

.header {
  position: sticky;
  top: 0;
  z-index: 10; /* Being humble this time 😄 */
}

"sticky" considerations

Sticky headers require a position set to anything but static.
Specify a directional value (top, bottom, left, right). Remember, a sticky element is a wanderer, but always returns home.

Full-width coverage

If your header prefers the panoramic view, simply give it width: 100%; ensuring no overflowing or hidden content to detract from a stunning header view.

Visual distinction

For a header that stands out, add a distinct background-color and even a box-shadow.

Bootstrap for efficiency

If you have Bootstrap at your disposal, use the .navbar-fixed-top class to ease the sticky header implementation.

Animated appearance

Spice up your UX with jQuery, adding animations like a fading header effect. Remember, with great power comes great responsibility - don't let the animations become a distraction.

Conflict checks

Test your header across various contents and display conditions. Look out for conflicts with other elements, ensuring your header is top dog at all times.

Simplicity first

Prioritize CSS-only solutions to enhance website performance and reducing dependence on JavaScript. Remember, the best solution is often the simple one!

Extra tips for your layout

Protecting safe areas

For devices with display cut-outs or notches, make sure your header respects the env(safe-area-inset-*) values for optimum visibility on all device screens.

Enhancing accessibility

Enhance accessibility compatibility by using <header> HTML tags in combination with appropriate ARIA roles, ensuring better SEO and user experience.