「position: fixed」でスクロール固定したヘッダーを横にスクロールさせる
この記事が参考になる。
.header {
position: fixed;
top: 0;
min-width: 1000px;
}
みたいに固定されててmin-width
指定してあると、min-width
下回ると普通のコンテンツは横スクロール出来るが、fixed
のコンテンツは出来ない。
なので、fixed
してあるheader
だけが横スクロールできなくなってしまう。本来は中身のコンテンツを横スクロールしたらheader
も横スクロールしたい。
なので、その時は
$(window).on("scroll", function(){
$(".header").css("left", -$(window).scrollLeft());
});
のようにJSで動かしてあげる。
window
をscroll
したら、.header
のcss
にleft
を入れてあげる。
その値はwindow
の横スクロールした値の逆。
scrollLeftは右に画面がいった値(左にスクロールした値)なので、その逆をleftに入れてあげる。
100px左にスクロールしたらleftに-100px。
これで実質同じ動きが実現できます。