CSS positioning (position) sticky positioning

Sticky literally means sticky, paste, so it can be called sticky positioning.
position: sticky; Positioning based on the user's scroll position.
Sticky positioning elements are dependent on the user's scrolling, switching between position:relative and position:fixed positioning.
It behaves like position: relative; and when the page scrolls beyond the target area, it behaves like position: fixed; and it will be fixed at the target position .
Element positioning is expressed as relative positioning before crossing a certain threshold, and fixed positioning afterwards .
This specific threshold refers to one of top, right, bottom or left. In other words, specify one of the top, right, bottom or left thresholds to make sticky positioning take effect. Otherwise, its behavior is the same as relative positioning.
Note : Internet Explorer, Edge 15 and earlier versions of IE do not support sticky positioning. Safari needs to use the -webkit- prefix (see the example below).

Examples:

div.sticky {
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 0;
    background-color: green;
    border: 2px solid #4CAF50;
}