About Position Sticky

Use position: sticky; for elements that you want to stick at the top or bottom of the visible part of their containers while the rest of the content is scrolled.

1
2
3
4
5
.sticky-header {
    position: sticky;
    position: -webkit-sticky;
    top: 0;
}

Tips and Tricks Web Design HTML5 CSS3