fixedした要素の横スクロールに対応する

ヘッダーを固定したい場合、position: fixed;を使用するが、position: fixed;をかけた要素は横方向にも固定され、スクロールバーでの移動に対応できない。
その為、JavaScriptでウィンドウのスクロールを監視し、fixedした要素のleftを設定する。

スタイルシート(ヘッダー固定)

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

JavaScript（汎用的に書き換え）

// ヘッダー固定処理
$(window).scroll(function(){
    var $scrollX = $(this).scrollLeft();
    $('.fixScroll').css('left',-$scrollX);
});

JavaScript（参考元）

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

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

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

参考サイト

みかづきブログ その3

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

http://kimizuka.hatenablog.com/entry/2016/01/24/162756