CSSポジショニング（position）スティッキーポジショニング

スティッキーは文字通りスティッキー、ペーストを意味するので、スティッキーポジショニングと呼ぶことができます。
position：sticky;ユーザーのスクロール位置に基づく位置付け。
スティッキーポジショニング要素は、ユーザーのスクロールに依存し、position：relativeとposition：fixedの位置を切り替えます。
位置：相対のように動作し、ページがターゲット領域を超えてスクロールすると、位置：固定のように動作し、ターゲット位置に固定されます。
要素の配置は、特定のしきい値を超える前の相対的な配置と、その後の固定された配置として表されます。
この特定のしきい値は、上、右、下、または左のいずれかを指します。つまり、スティッキーポジショニングを有効にするには、上、右、下、または左のいずれかのしきい値を指定します。それ以外の場合、その動作は相対的な配置と同じです。
注：Internet Explorer、Edge 15およびそれ以前のバージョンのIEは、スティッキーポジショニングをサポートしていません。Safariは-webkit-プレフィックスを使用する必要があります（以下の例を参照）。

例：

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