position: fixedの要素を横方向にスクロールさせたい

コーディング（マークアップ）していると、
position: fixedを指定した要素に横スクロールを効かせたい場面に遭遇しませんか？

スクロール時にページ上部のグローバルナビを追従させるために、fixedを指定することがありますが、これを指定するとtopだけでなくleftも0pxに固定されちゃいますよね。。。

で、これの何が問題かって
ウィンドウサイズをコンテンツ幅より小さくした時に、横スクロールで内容を表示させるのですが、left: 0pxに固定されちゃってるので横スクロールしても表示されなくなってしまうのですよ。。。

解決方法

left: 0pxに固定されることが原因なので、
JavaScriptでposition: fixedを指定した要素にスクロール時に変化するleftの値を与えます。

■ JavaScript

$(window).on("scroll", function(){
    $("#fixed").css("left", -$(window).scrollLeft());
});

#fixedがposition: fixedを指定した要素になります。

前職でもfixed指定のグローバルナビに横スクロールさせたい～～という場面があったのですが、転職先でもソッコー再びぶち当たりました。

覚えておくと、とても便利。