HTML&CSS

【CSS】要素を固定したり解除したりできる【sticky】を利用したスニペットまとめ

今回はCSSのpositionプロパティの「sticky」で要素を固定するスニペットをご紹介していきます。

Webサイトを制作していると、一時的にサイドバーを固定したり、途中から固定を解除したいなぁって時ありますよね。

もちろんJavascriptを利用すれば、スクロール位置を取得して、要素の固定や解除の実装が可能ですが、ちょっとした固定や解除をしたい時は、CSSの【sticky】のみで実装ができたりします。

そこで、今回は主にCSSの【sticky】を利用したcodepenのスニペットを紹介していきたいと思います。

positionプロパティの「sticky」とは

簡単にCSSのpositionプロパティの「sticky」についても触れておきます。

スクロールに応じて要素を固定表示にすることができます。
他のpositionプロパティ(static, relative, absolute, fixed)の違いは、DOMのフローで閉めるスペースです。
staticとrelativeはドキュメントのフローで自然なスペースを保ちますが、absoluteとfixedの場合本来配置されるべきスペースは取り除かれ、フロートしているような振る舞いをし、周りの要素はabsoluteとfixedがそこに存在しないかのような挙動をとります。

position:sticky;について – Qiita

「sticky」についてさらに知りたい場合はこちらから

https://qiita.com/ari-chel/items/c1ede1f27a37129a7cbe

「sticky」はIE11では使えない?!

※CSSの「sticky」はIE11で利用する場合、そのままでは使えません。
以前記事にしたポリフィルを利用することで、IE11でも「sticky」を使用する事ができます。

IE11で未対応CSS、未対応JSに対応させる方法

CSS【sticky】を利用したスニペット

ここから、要素を固定させたり解除したい時に、参考になるcodepenのスニペットをご紹介していきます。
※一部Javascriptを利用しているスニペットもあります。

Scrolling half by half pure #CSS by @Kseso

画像を交互に固定させて見せるレイアウトスニペット。
レイアウトの引き出しが増えますね!

See the Pen Scrolling half by half pure #CSS by @Kseso by Kseso (@Kseso) on CodePen.dark

Sticky Sections (Pure CSS)

シンプルなセクション固定のスニペット。

See the Pen Sticky Sections (Pure CSS) by alphardex (@alphardex) on CodePen.dark

CSS Sticky Parallax Sections

CSSだけでパララックスまで実装しているスニペット。
「sticky」で要素を固定しつつ、transformで奥行きを出してパララックス効果を演出しています。

また視差効果を減らす設定の時に配慮したメディアクエリ「prefers-reduced-motion」が利用されている点も参考なります!

See the Pen CSS Sticky Parallax Sections by Ryan Mulligan (@hexagoncircle) on CodePen.dark

CSSでパララックスを実装する参考サイト

https://on-ze.com/archives/1947

prefers-reduced-motionメディアクエリでアニメーション酔いに配慮する

https://note.com/takamoso/n/ncd758ab68491

StickyTable

excelの「ウィンドウ枠の固定」みたいに、テーブルの「th要素」を固定させるスニペット。
テーブルが縦長になる場合とか便利そう。

See the Pen StickyTable by s0tter (@s0tter) on CodePen.dark

Pretty Sticky

記事のフローだったり、リストの時に番号を固定させるスニペット。
ちょっとした固定が、コンテンツの見やすさをアップさせますね!

See the Pen Pretty Sticky by Burmese Potato (@BurmesePotato) on CodePen.dark

Sticky Sidebar

ニュース一覧とかの時に、サイドバーを固定するスニペット。

See the Pen Responsive Sticky Sidebar by Darren (@jamesdarren) on CodePen.dark

Smooth Scrolling Sticky ScrollSpy Navigation

こちらはJSが合わせて使用されてますが、今どの位置にいるのか分かりやすいです!

See the Pen Smooth Scrolling Sticky ScrollSpy Navigation by Bramus (@bramus) on CodePen.dark

position: sticky example

記事の途中で画像を固定させて、途中で解除するスニペット。
こちらはポリフィルの「stickyfill」が適用されてますね!

See the Pen position: sticky example by Dudley Storey (@dudleystorey) on CodePen.dark

Sticky Progress

「sticky」でコンテンツのプログレスバーを実装するスニペット。

See the Pen Sticky Progress by Jonathan Snook (@snookca) on CodePen.dark

Sticky Footer Magic

position stickyは使われてないけど、よくあるパターンなのでご紹介。
コンテンツが短い時にフッターを固定させるスニペット。

See the Pen Sticky Footer Magic by Melissa Canada (@MelissaMMDP) on CodePen.dark

Sticky Slider Navigation (Responsive)

全くposition stickyは使われてないけど、面白いのでご紹介。
コンテンツごとにナビゲーションが移動するスニペット。

See the Pen Sticky Slider Navigation (Responsive) by Ettrics (@ettrics) on CodePen.dark

最後に

今回は、要素を固定したり解除したりできるCSS【sticky】を利用したスニペットまとめを紹介いたしました。

ちょっとした事ですが、サイトの見やすさや使いやすさに影響するので、是非取り入れていきたいですね。