position: sticky で要素を固定表示させる
IE ではまだ使えない。@supports 規則を使って、すでにサポートされているブラウザのみに指定するのが良いだろう。ただし、その場合でも Firefox 57 や Chrome 63 ではバグがあるようなので注意が必要だ。
position: sticky がどういうものかは MDN のデモを見るのが一番早いが、q-Az さんの記事に書かれた一文が簡潔でわかりやすい。
簡単に言うと「スクロールでその位置まで来たらそれ以降は fixed する」みたいな感じです。
position: sticky を使うと、スクロール途中から要素を固定表示させることができる。サイトのナビゲーションを途中から固定表示させたり、セクションの見出しをセクションの開始から終了まで固定表示させたり、実用性の高そうな値だ。
固定表示に切り換えるときにアニメーションを加えたり、固定表示に切り替えるときに要素を変更したり、こういったことは position:sticky でできなそう。素直に JavaScript を使ったほうが良いと思う。
