Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

「position: fixed」でスクロール固定したヘッダーを横にスクロールさせる

この記事が参考になる。

.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。

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

XxGodmoonxX
Keio University SFC → Design&Tech Company Frontend Engineer
https://motoki-watanabe.net/
mohikanz
エンジニアのための雑談コミュニティ
https://mohikanz.slack.com
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away