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指定のグローバルナビに横スクロールさせたい~~という場面があったのですが、転職先でもソッコー再びぶち当たりました。
覚えておくと、とても便利。