[JavaScript] position:fixedを横スクロールで固定させない方法

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 }
);

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

参考

• [JavaScript] スクロールイベントを最適化してパフォーマンスを向上させる方法
• [JavaScript] スクロールイベントに Passive Event Listener 指定してパフォーマンスを向上させる方法