CSSの[position:fixed]で固定している要素を横スクロールさせる方法

CSSの[position:fixed]で要素を固定すると、ブラウザ幅がコンテンツ幅を下回った際に固定している要素だけ横スクロールしてくれません。

最近のWEBサイトはほとんどレスポンシブ対応なので、該当するケースは少ないと思いますが、古いサイトを改修する時にハマったので備忘録兼Tipsとして紹介します。

固定している要素を横スクロールさせる方法

私を含め、ほとんどの方が要素に[overflow-x:scroll]など入れてみたりすると思いますが、[position:fixed]はそんなことではビクともしません（笑）

対処方法としては、JavaScriptを利用します。

横スクロール発生時に[position:fixed]が適用されている部分のleft値が変わるようにすれば、leftが0pxで固定されないためスクロールできるようになります。

$(window).on("scroll", function(){
    $("fixedしている要素").css("left", -$(window).scrollLeft());
});