You know position sticky?

position: sticky is a hybrid of position: relative and position: fixed. The element is treated as a relative position until it crosses a specified limit, when it is treated as a fixed position.

That is, if you want to make, for example, a header that is floating when you start scrolling, just use:

header {
  position: sticky;
  top: 0
}

See the example