How to create: fixed header during scrolling

Learn how to use CSS and JavaScript to create a fixed/sticky header during scrolling.

Try it yourself

Create a fixed header during scrolling

First step - Add HTML:

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

Second step - Add CSS:

Set the style of the page header; add position: sticky and top: 0 to keep the header fixed when it scrolls to the top. 
.header {
  position: sticky;
  top: 0;
  padding: 10px 16px;
  background: #555;
  color: #f1f1f1;
}

Try it yourself

Set the element to position: sticky; After that, its position is determined by the user's scroll position.

Sticky elements switch between relative and fixed positioning based on the scroll position. Before reaching the given offset position within the viewport, it maintains relative positioning; after reaching it, it 'sticks' to that position (like position: fixed like this).

Note:To make sticky positioning work, you must at least specify top、right、bottom or left 中的一个。

Strony związane

Tutorial:CSS position