4
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Posted at

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

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

4
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?