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

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

参考