CSSのfixedを適用していると横スクロール時に一部非表示になることがある

css_fixed_hidden

CSS fixedで固定したメニューの問題点

スクロール時に上のメニュー部分を追随させるためにposition:fixedを指定することがあるが、こちらを指定するとtopだけでなくleftも0pxで固定になってしまう。

これの何が問題かというとウィンドウサイズをページ内のコンテンツの横幅よりも小さくしたときに横スクロールのバーがブラウザの下の方に表示されるがこれを右に移動させても左位置が0pxに固定されているためウィンドウサイズを小さくしたことで非表示になっている右側の部分が右にスクロールしても表示されなくなってしまうのだ。

例えばライブドアブログのメニューの場合、少し下にスクロールするとpositionがfixedになり、ウィンドウサイズを小さくすると「コメント速報」の部分が右スクロールをしても表示されなくなってしまう。

ブログ系のサイトだと上部を固定することが多いようだ。

解決方法

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

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

横スクロール発生時にJavaScriptでleft値を変更するサンプル

カテゴリーcss