CSS position: sticky

position: sticky is a CSS property that allows an element to remain in its normal flow of the document but also "sticks" to a specific position when the user scrolls.

To use position: sticky, you need to specify the top, right, bottom, or left property to indicate the position where the element should stick. For example:

.sticky-element {
  position: sticky;
  top: 20px;
}

In this example, the .sticky-element will remain in its normal flow until the user scrolls past 20 pixels from the top of the window. Once that happens, it will stick to that position and move with the rest of the content.

It's important to note that position: sticky will not work if the parent element has the overflow: hidden, overflow-x: hidden, or overflow-y: hidden property.

Also, position: sticky is not supported in Internet Explorer 11 or earlier versions.