2016-08-04

CSSでバーをスクロールに追従させる

はじめに

webサイトでたまに見かける、トップメニューのバーが画面のスクロールに合わせて追従する仕組みがありますよね。アレを実装したいなあと思って調べてみると、JQueryの記事ばかりで、Javascriptよりかは簡単なのでしょうが、ちょっと尻込みしてしまう方もいるのではないでしょうか。

そこで、今回はCSSのみでスクロールに追従するバーの簡単な実装方法を紹介したいと思います。

トップのメニューバーを追従させる

スクロールに追従させる機能のキモが「position: fixed」プロパティです。このプロパティを追従させたい要素に適用することで、スクロールに追従するようになりますが、注意点もあります。

CSS
画面表示
トップ0設定なし

このように、ただ「position: fixed」を適用しただけでは、プロパティを適用した次に来る要素の上に配置されてしまいます(オレンジのheaderの下に隠れてdiv要素があります)。これは、「position: fixed」を適用した要素は別レイヤーに配置され、その要素が別レイヤーに移動した分、その要素に続く要素が詰めてきためと考えられます。

対処としては、続く要素(今回は緑のdiv要素)に「margin-top」でスクロールするメニューバー分の領域を確保し、「position: fixed」を適用した要素に対し、「top: 0」を合わせて適用する方法があります。「top」は、「ページトップの位置からどれだけ離れた位置に要素を設置するか?」というプロパティで、0はページトップの開始位置を指します。pxで指定すれば、指定した分だけページトップから下に離れた距離に要素が配置されます。

CSS
画面表示
トップ0設定済み

サイドバーを追従させる

同じ要領で、サイドバーも追従させることが出来ます。

CSS
画面表示
追従サイドバー

難点があるとすれば、margin-leftの設定など、少々荒っぽい感じがあるところでしょうか。

ちなみに、サイドバーの追従スクロールは当サイトのこちらのページで使用しています。

さいごに

このように、CSSのみでスクロールに追従するバーを作成することが出来ます。しかし、追従開始と同時にレイアウトが変わったりするような、凝った作りの物を作りたいのであれば、JQueryJavascriptを使用したスクロールバーのほうが良いかもしれません。



コメントする(※は必須項目です)













画像認証