Position: sticky the new solution
Using position: sticky in CSS we create an sticky element which sticks the element to its container once user scrolls. Although depend on the scroll direction we should give the element one of the top, bottom, left or right properties for the sticky value to work. According to MDN:
The element is positioned according to the normal flow of the document, and then offset relative to its nearest scrolling ancestor and containing block.
Sticky positioning can be thought of as a hybrid of relative and fixed positioning. A stickily positioned element is treated as relatively positioned until it crosses a specified threshold, at which point it is treated as fixed until it reaches the boundary of its parent.