今回はCSSのpositionプロパティの「sticky」で要素を固定するスニペットをご紹介していきます。
Webサイトを制作していると、一時的にサイドバーを固定したり、途中から固定を解除したいなぁって時ありますよね。
もちろんJavascriptを利用すれば、スクロール位置を取得して、要素の固定や解除の実装が可能ですが、ちょっとした固定や解除をしたい時は、CSSの【sticky】のみで実装ができたりします。
そこで、今回は主にCSSの【sticky】を利用したcodepenのスニペットを紹介していきたいと思います。
positionプロパティの「sticky」とは
簡単にCSSのpositionプロパティの「sticky」についても触れておきます。
スクロールに応じて要素を固定表示にすることができます。
position:sticky;について – Qiita
他のpositionプロパティ(static, relative, absolute, fixed)の違いは、DOMのフローで閉めるスペースです。
staticとrelativeはドキュメントのフローで自然なスペースを保ちますが、absoluteとfixedの場合本来配置されるべきスペースは取り除かれ、フロートしているような振る舞いをし、周りの要素はabsoluteとfixedがそこに存在しないかのような挙動をとります。
「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でパララックスを実装する参考サイト
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】を利用したスニペットまとめを紹介いたしました。
ちょっとした事ですが、サイトの見やすさや使いやすさに影響するので、是非取り入れていきたいですね。
