青いやつの進捗日記。

メモとしてべんきょうのしんちょくをかいていきます。あとで自分が検索しやすいもん

potision:fixed したheaderがページ全体のmin-widthを下回った時にスクロールできなくなってしまう

www.websuccess.jp

この記事が参考になる。

.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で動かしてあげる。 windowscrollしたら、.headercssleftを入れてあげる。
その値はwindowの横スクロールした値の逆。

scrollLeftは右に画面がいった値(左にスクロールした値)なので、その逆をleftに入れてあげる。
100px左にスクロールしたらleftに-100px。

これで実質同じ動きが実現できます。