fixedの要素も横方向にはスクロールして欲しいという想い

マークアップをしていると、「縦方向にはfixedにしたいけど、横方向にはfixedしたくない」と思う瞬間がやってくると思います。
そんな時はJavaScriptでウィンドウのスクロールを監視し、fixedした要素のleftを設定するだけで実装できます。

HTML

<div id="header"></div>

CSS

body {
  min-width: 980px;
}

#header {
  position: fixed;
  min-width: 980px;
  width: 100%;
  height: 64px;
  z-index: 10;
}

JavaScript

var header = document.getElementById("header");

window.addEventListener('scroll', _handleScroll, false);

function _handleScroll() {
  header.style.left = -window.scrollX + "px";
}

DEMO 1

横方向にはスクロールできます。

DEMO 2

http://codepen.io/kimmy/full/VeQMQz/

クラスにするとこんな感じです。

是非ともDEMOページを横幅を980px以下にしてご観覧ください。

---

メールアドレスを入力中にドメインをサジェストするフォームをつくってみました。https://t.co/nyD5b7XJDG

— 君塚史高 (@ki_230) 2017年5月12日

ツイッターやってます！