<div class="stick-container">
  <h1>
    Header
  </h1>
  <p> Some text to allow the sticky header to stick! </p>
  <p> This paragraph will continue to scroll underneath the header, because stick headers are AMAZING! </p>
  <p> Another paragraph just to have content to scroll underneath our header, </p>
  <div class="sticky">
    Footer
  </div>
</div>
.stick-container {
  padding: 0 8px;
  width: 200px;
  height: 200px;
  overflow-y: auto;
  border: 1px solid #333;
}
.sticky {
  position: sticky;
  bottom: 0;
  background-color: #EEE;
  border: 2px dashed black;
  padding: 8px;
}
p {
  border: 2px dashed blue;
  padding: 8px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.