[JavaScript] position:fixedスクロール固定ない方法

2 min read

position: fixedと絶対位置を指定すると、スクロールしても位置が固定されたままとなる。

ナビゲーション用のメガメニューをposition: fixedで固定することは多いが、レスポンシブでなかったり横幅が絶対値指定の場合に横スクロールをすると他のコンテンツとずれてしまう。
こういった場合では横スクロールをした場合はズレるようにしたい。

デモ

方法

スクロールに応じて(window.scrollX)、対象の要素の位置をズラす処理を行う。

header.style.left = -window.scrollX + "px";
const header = document.querySelector("header");
let ticking = false;

document.addEventListener(
  "scroll",
  () => {
    if (!ticking) {
      requestAnimationFrame(() => {
        ticking = false;
        // header position
        header.style.left = -window.scrollX + "px";
      });
      ticking = true;
    }
  },
  { passive: true }
);

スクロールイベントは負荷が高いため、最適化すると良いだろう。

参考

このページをシェアする

関連タグ

関連記事

[CSS] 究極のIE対策

条件付きコメント / メディアクエリを利用して IE10〜IE11 に対応する

Deprecated になった jQuery API を静的に検出する方法

モチベーション / eslint-plugin-no-jquery を導入する / 実行する

Boolean型の変数に適した命名規則

背景 / プレフィックス / どのような条件なのか分かりやすくする / 否定形を避ける / 同じ意味の単語を避ける / プロジェクトの命名規則やコーディング規約に従う / Linter で矯正する

CSS in JSとは何か

想定読者 / そもそも JS フレームワーク(React、Vue.js)を採用する理由とは何か / 「命令的 UI」 と 「宣言的 UI」 / 「命令的 UI」 VS 「宣言的 UI」 / CSS in JS とは / CSS in JS ライブラリ / Emotion の使い方 / 利用するメリット / 利用するデメ