position: sticky を使ってみよう

sticky

【名】スティッキー、付箋（紙）◆アメリカではポストイットのような付箋全般をスティッキーと呼ぶ

https://eow.alc.co.jp/search?q=sticky

だそうです。

ページの中腹くらいに横長のグローバルメニューがあってスクロールすると画面上部に固定されてついてくる・・・なんていうデザインのサイトがよくありますが、もし作るとしたらどのように実装したらいいでしょうか？

少し前までだと JavaScript を使って特定のスクロール位置まで達したら要素のクラスを切り替えて position: fixed を適用するちょっと面倒な方法がメジャーだったと思いますが、これからは position: sticky で簡単にできるかもしれません。

かもしれませんというのは、position: sticky は現時点でまだ草案段階だからです。とは言っても Chrome や Firefox 、Edge ではすでに使えるし、Safari でもベンダプレフィックスをつければ使えます。IE11 は使えません。仕方ないですがポリフィルを使いましょう。

デモ

デモページはこちら

sticky の説明

言葉で説明するのが意外と難しいので覚悟して聞いてください。

まず、表示される位置は、通常のフローに従った表示位置 と オフセットされた表示位置 のいずれかとなります。どちらの表示位置となるかは 通常のフローに従った表示位置 をもとに計算され、 top や left などでの指定によって異なります。

例えば top を指定した場合、画面のスクロール位置が 通常のフローに従った表示位置 より上の場合はそのまま 通常のフローに従った表示位置 に表示され、通常のフローに従った表示位置 より下にスクロールすると オフセットされた表示位置 に表示されます。ただし要素が親要素をはみ出すことはありません。

bottom を指定した場合はその逆となります。

top と bottom を両方指定することもできます。その場合、画面のスクロール位置が 通常のフローに従った表示位置 より上の場合は bottom のオフセットに従って表示、画面のスクロール位置内に 通常のフローに従った表示位置 がある場合はそのまま 通常のフローに従った表示位置 に表示、画面のスクロール位置が 通常のフローに従った表示位置 より下の場合は top のオフセットに従って表示、となります。

いかがでしょうか。日本語でおkですか？まあ実際使って見た方がわかりやすいかもしれません。

ポリフィル

ポリフィルは stickyfill が良さげです。top での相対指定しか対応してないようですが、ほかのポリフィルより見栄えが良かったです。

stickyfill.min.js を読み込んで以下を実行する必要があります。

var box = document.querySelectorAll(セレクタ);
Stickyfill.add(box);