1
HTML/CSSIntermediate#css#float
An element behaves as relative until its scroll position crosses a specified threshold (like top: 0), then it 'sticks' as fixed within the bounds of its containing block. It requires a defined top/bottom/left/right value and doesn't work if an ancestor has overflow: hidden.
.header {
position: sticky;
top: 0;
background: white;
z-index: 10;
}