position:stick


position:stickはスクロールして、定位置まで来たらそれ以降は fixed するプロパティです。

■html

position: sticky

■css
.sticky {
position: sticky;
top: 0;
}

h3 要素の位置までスクロールをすると固定されます。定位置まで来ると固定されるところが、プロパティのfixed とは異なります。

どこまで固定されるかは「stickyが指定された要素の親の端」までです。