【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つめの方法が向いています。

udemyでJavaScriptを学ぶ

講座名
【2023年最新】【JavaScript＆CSS】ガチで学びたい人のためのWEB開発実践入門（フロントエンド編） icon
学習時間
24.5時間
学習内容
  • 本格的なWEBサイトを作成する方法について学びます。
  • Sass（※以下CSSと記載）、JavaScriptの基礎について深く学びます。
  • CSS、JavaScriptの実践的な記述について深く学びます。
  • CSS、JavaScriptアニメーションの実装について学びます。
  • 最新の実践的なWEB画面の作成方法について深く学びます。
  • CSS、JavaScriptのコードの最適化、安定化について学びます。
  • 維持管理、持続可能なコードの記述方法について学びます。
対象受講者
  • ドットインストールでCSS、JavaScriptの入門編を終えたレベルの方
  • 他の先生のフロントエンドの入門編を終えたレベルの方
  • 自分で本格的なWEBサイトを作ってみたい方
  • CSS、JavaScriptの実践的な基礎を効率的に学びたい方
  • CSS、JavaScriptを今後仕事で使う予定の方
  • CSS、JavaScriptのコードの整理方法について学びたい方
  • CSS、JavaScriptのアニメーションを学びたい方
  • CSS、JavaScriptのレベルアップしたいWeb開発初級者の方
  • CSS、JavaScriptでどのようにすればレベルアップできるのか悩んでいる方
講座名
【JS】ガチで学びたい人のためのJavaScriptメカニズム icon
学習時間
20.5時間
学習内容
  • JavaScriptの動作原理について深く学びます。
  • JavaScriptがどのように実行されるのかについて深く学びます。
  • ES6+の最新のJavaScriptの記法について幅広く学びます。
  • 変数や参照の仕組みについて深く学びます。
  • オブジェクトのメカニズムについて深く学びます。
  • 関数のメカニズムについて深く学びます。
  • スコープの仕組みについて深く学びます。
  • プロトタイプのメカニズムについて深く学びます。
  • 反復処理のメカニズムについて深く学びます。
  • ジェネレーターやイテレーターについて深く学びます。
  • コールバック関数について深く学びます。
  • 非同期処理のメカニズムについて深く学びます。
  • モジュールの仕組みについて深く学びます。
  • クロージャーの仕組みについて深く学びます。
  • レキシカルスコープの仕組みについて深く学びます。
  • アロー関数の特徴について深く学びます。
  • レキシカルスコープの仕組みについて深く学びます。
  • アロー関数の特徴について深く学びます。
  • thisの仕組みについて深く学びます。
  • bind、apply、callの動作原理について深く学びます。
  • クラスと継承の仕組みについて深く学びます。
  • ReflectやProxyなどの強力なオブジェクトへの理解を深めます。
  • Map，Setなどの強力なコレクションについて実践を交えて学びます。
  • よく使用される強力な実装パターンを演習を交えて学びます。
  • 独自のフレームワークを構築していく中でJavaScriptのメカニズムについて理解を深めます。
対象受講者
  • JavaScriptをコアの動作原理からキチンと理解したい方。
  • 自分の思った通りコードが動かずに悩んでいる方。
  • 自分の思った通りに動かず、気付いたら解決するのに１日経ってしまっていた経験のある方。
  • React, Vue, Angularが使いこなせず悩んでいる方。
  • JavaScriptの不可解な動きが理解できず、苦しんでいる方。
  • 少し複雑なコードを書こうとすると、ぐちゃぐちゃになって整理しきれず、悩んでいる方。
  • JavaScriptを本気で勉強したいと思っている方。
  • JavaScriptの変態仕様に苦しんでいる方。
  • JavaScriptが苦手なプログラマーの方。

-フロントエンド
-,