<header class="sticky-header-fixed">Sticky Header : Fixed</header>
<div class="container">

  <header class="sticky-header-sticky">Sticky Header : Sticky</header>
  <div class="content">
    <!-- Long content here -->
  </div>
</div>
.container {
  height: 1500px;
  background: skyblue;
}
.sticky-header-fixed {
  position: fixed;
  background-color: #333;
  color: white;
}

.sticky-header-sticky {
  position: sticky;
  top: 20px;
  background-color: #333;
  color: white;
}

body {
  height: 5000px;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.