【CSS】position:fixedで固定している要素を横スクロールさせる方法

今どきのWEBサイトは、ほとんどがレスポンシブ対応。画面サイズに合わせてデザインが柔軟に変わるのが当たり前になっていますよね。

でも、古いサイトを改修したり、ちょっと特殊なレイアウトで固定要素（position: fixed）を使うと、思わぬ落とし穴に出くわすことがあります。

それが、ブラウザ幅よりコンテンツが広くて横スクロールが発生したとき、固定要素だけが動かず、画面に取り残されてしまうという問題です。

レスポンシブ全盛の今ではあまり見かけませんが、昔のデザインやアプリ系の特殊なレイアウトでは、意外とこの現象に遭遇することがあります。

固定要素を横スクロールに追従させるには？

position: fixed は、画面（ビューポート）に対して要素を固定する指定です。

ページを上下にスクロールしても、メニューやサイドバーがずっと同じ場所に表示される便利なスタイルですよね。

でも、コンテンツが横に広がって横スクロールが起きると、fixed要素は left: 0 のまま。背景だけがスクロールして、要素が置いてけぼりになります。

ネットで調べてみると、こんな対策がよく紹介されています。

ただし、これらでは fixed の「画面に固定される」という性質自体は変えられないので、根本解決にはなりません。

そこで登場するのが JavaScript（jQuery）です！

やり方はとてもシンプルで、横スクロールに応じて left の値を動的に調整してあげるだけ。

固定要素をウィンドウのスクロール量に合わせて“ずらす”ことで、画面上で動いて見えるようにします。jQueryを使った例はこちら。

$(window).on("scroll", function(){
  $(".fixed-element").css("left", -$(window).scrollLeft());
});

このコードの意味は

$(window).on(“scroll”, …)：スクロールしたときに反応する処理です。
$(“.fixed-element”).css(“left”, -$(window).scrollLeft())：今の横スクロール量を取得して、leftの位置をマイナス方向に調整しています。

これで、固定要素も横スクロールに合わせて自然に動くようになります！

「最近のサイトって横スクロールなんて起きないのでは？」と思うかもしれませんが、次のようなシーンでは横スクロールが発生することがあります。

レスポンシブが当たり前になる前は、幅960pxや980pxといった固定レイアウトが主流でした。この時代のサイトでは、ブラウザ幅が狭いとすぐに横スクロールが発生します。

そこに position: fixed のメニューやサイドバーがあると、画面とズレてしまい、ユーザーが混乱してしまいます。

また、最近でもギャラリー系サイトやアプリのUIで、意図的に横スクロールを使っているケースがありますよね。そんなときも注意が必要です。

スマホやタブレットでは、表示領域が狭いため、横に長い表や画像があると簡単に横スクロールが発生します。

もし固定要素が left: 0 のままだと、スクロール先ではメニューが見えない、なんてことに。

だからこそ、モバイルでもスクロールに合わせて動くようにしておくと、操作しやすくなって親切です。

JavaScriptを使わずに、CSSだけで解決できる方法もあります。

それが、position: stickyです！

sticky は、要素がある一定位置に到達したら、そこに固定されるというスタイル。

fixedと似ているけど、親要素の範囲内でのみ固定されるのがポイントです。

.sticky-element {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

とても簡単で使いやすいのですが、注意点もあります。

stickyは親要素の overflow や高さの指定に影響されやすいので、期待通りに動かないことも。そんなときは、HTML構造やCSS設定を見直す必要があります。

固定要素が横スクロールに対応してくれない問題。地味だけど、見た目や操作感に大きな影響を与えます。解決法としては

このどちらかを採用することで、快適なUIが実現できます。

古いサイトのリニューアルでも、スマホでの操作性向上でも、こうした細かな工夫がユーザー体験を大きく変えるもの。ぜひ、あなたのサイトでも試してみてください！

コメントは管理人の承認後、反映されます。