How TO - On Scroll Header

Learn how to create a fixed/sticky header on scroll with CSS.

How To Create a Fixed Header on Scroll

Step 1) Add HTML:

Example

  <div class="header" id="myHeader">
  <h2>My Header</h2>
</div>

Step 2) Add CSS:

Style the header; add position:sticky and top:0 to make the header stick when you reach its scroll position:

Example

  .header {
  position: sticky;
  top: 0;
  padding:
  10px 16px;
  background: #555;
  color: #f1f1f1;
}

An element with position: sticky; is positioned based on the user's scroll position. A sticky element toggles between relative and fixed, depending on the scroll position. It is positioned relative until a given offset position is met in the viewport - then it "sticks " in place (like position:fixed). Note:You must specify at least one of top, right, bottom or left for sticky positioning to work.

To learn more about CSS positoning, read the CSS Position tutorial.