【PR】を含みます。

フロントエンド

【JavaScript・jQuery】固定ヘッダーを横スクロールに追従させる方法

JavaScript・jQuery 固定ヘッダーを横スクロールに追従させる方法

ウェブサイトで固定ヘッダーを使うとき、縦スクロールには対応していても、横スクロールに対応できていないケースがあります。

特に横に広いコンテンツを持つページでは、横スクロールした際にヘッダーがズレてしまい、見た目や操作性が悪くなることも…。

この記事では、そんな問題を解決するために、JavaScript（バニラJS）とjQueryの両方を使った固定ヘッダーの横スクロール追従の実装方法をシンプルに解説します。

基本的な考え方は、横スクロール量に合わせてヘッダーのleftの位置を動的に調整するだけ。

スクロールイベントを監視して、画面の見た目を崩さずに固定ヘッダーを快適に使えるようにしましょう。

まずはJavaScriptのコード例から見ていき、その後jQueryでの実装も紹介します。

JavaScriptで固定ヘッダーを横スクロールに追従させる方法

まずはJavaScript（バニラJS）での実装例です。

Copyをクリックするとコピーできます。

JavaScript
Copy
const header = document.getElementById('header');
if (header) {
  window.addEventListener('DOMContentLoaded', function() {
    header.style.left = -window.scrollX + 'px';
  });
  window.addEventListener('scroll', function() {
    header.style.left = -window.scrollX + 'px';
  });
}

コード解説

  • window.scrollXはウィンドウの横スクロール量をピクセルで返します。
  • 横スクロール量に合わせてleftの値を動的に更新し、ヘッダーの位置ズレを防いでいます。

jQueryで固定ヘッダーを横スクロールに追従させる方法

続いて、jQueryを使った場合の実装例です。

Copyをクリックするとコピーできます。

jQuery
Copy
const $header = $('#header');
if ($header.length) {
  $(document).ready(function() {
      $header.css('left', -$(window).scrollLeft());
  });
  $(window).on('scroll', function() {
    $header.css('left', -$(window).scrollLeft());
  });
}

コード解説

  • jQueryのscrollLeft()で横スクロール量を取得しています。
  • jQueryのcss()メソッドでleftを動的に更新しています。

【サンプルコード】固定ヘッダーを横スクロールに追従させる

以下サンプルコードをhtmlファイルなどにコピペして、1500pxより小さい画面幅で確認することで横スクロールが発生します。

Copyをクリックするとコピーできます。

HTML
Copy
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>固定ヘッダーの横スクロール追従サンプル</title>
<style>
  body {
    height: 200vh; /* 縦にもスクロールできるように */
    margin: 0;
  }
  #header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    min-width: 1500px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    color: #fff;
    background: #3498db;
  }
  #content {
    width: 1500px;
    height: 100vh;
    margin: 60px auto 0;
    background: #eee;
  }
</style>
</head>
<body>
  <div id="header">固定ヘッダー（横スクロールに追従）</div>
  <div id="content">ここに横に長いコンテンツがあります。横にスクロールしてみてください。</div>
  <script>
    const header = document.getElementById('header');
    if (header) {
      window.addEventListener('DOMContentLoaded', function() {
        header.style.left = -window.scrollX + 'px';
      });
      window.addEventListener('scroll', function() {
        header.style.left = -window.scrollX + 'px';
      });
    }
  </script>
</body>
</html>

まとめ

どちらの方法も、横スクロールに合わせてヘッダーのleftを負の値で調整するシンプルなロジックが基本です。

普段jQueryを使っている方は2つめのコードを使うと簡単に実装できますし、JavaScriptだけで軽量に済ませたい場合は1つめの方法が向いています。

-フロントエンド
-,