【テクニック】固定ヘッダーを横スクロールに対応させる方法
position: fixed;でヘッダーを固定しているWEBサイトはよく見かけますよね。
bodyなどでコンテンツの横幅が決められている場合、ブラウザがその横幅以下になった場合、スクロールバーが表示されます。
この時、固定しているヘッダーは横スクロールのスクロールバーを右にずらしてもヘッダーはガッチリ固定されてしまっているため右側を表示することが出来ません。
今回の記事ではコンテンツの横幅が決められているサイトで固定ヘッダーを横スクロールに対応させる方法をご紹介します。
対策しないとどのような不都合が起こるのか
コンテンツの横幅が決められている時、固定ヘッダーは右側を表示することが出来ないとお伝えしましたが、文章だけだとイメージしづらいと思いますので実際の画面を見てみましょう。
See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.
横スクロールしても固定ヘッダーは固定されてしまっているため、隠れている右側のコンテンツを表示することが出来ません。
このような場合、CSSのみで解決することは出来ませんがjQueryを使用することで解決することが出来ます。
固定ヘッダーを横スクロールに対応させる方法
固定ヘッダーを横スクロールに対応させるには以下のjQueryのコードを追加します。
$(window).on("scroll", function(){
$("header").css("left", -$(window).scrollLeft());
});たったこれだけで固定ヘッダーを横スクロールに対応させることが出来ます。
See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.
このコードは画面がスクロールするたびにどれだけ横にスクロールしたかを取得し、headerのleftプロパティを横にスクロールした分、マイナスに設定してくれます。
これにより横スクロールした量に連動して固定ヘッダーも横に移動してくれるようになります。
まとめ
いかがでしたか？
今回の記事では横スクロールした際、固定ヘッダーを連動して横スクロールする方法をご紹介しました。
固定ヘッダーはよく利用される手法なので、横スクロール＋固定ヘッダーの組み合わせのサイトの場合は忘れないように対応しましょう。
