potiion:fixedでも画面幅を超えて表示させる方法

position:をfixedにした場合、要素幅が画面依存になると思いますが、
下記サイトではfixedになったヘッダーが画面幅を超えたwidthになっております。

検証ツール等で調べてもみましたが
headerのcssは100%で設定されておりました。

jQuery等での処理が別で必要なのでしょうか。
ご教授いただきたいです。

https://www.kondotec.co.jp/

html
  <body>
    <header>
      
    </header>
  </body>

css
*{
  margin:0;
  padding:0;
  list-style: none;
  box-sizing: border-box;
  font-size: 16px;
  font-family: "Source Han Sans JP";
  text-decoration: none;
}


header{
  height:80px;
  width:100%;
  position: fixed;
  top:0;
  z-index:9998;
  background:#ffffff;
  box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.12);
}

行動規範の内容に同意します

回答1件

ベストアンサー

min-width: 1200px;が設定されてますので、画面幅が1200px以下になっても要素の幅は1200px以下にはなりません。

min-width - CSS: カスケーディングスタイルシート | MDN

position: fixedしたヘッダーのスクロールは、下記のjQueryで実装しているようです。

jQuery
1$(window).on("scroll", function(){
2    $(".site-header").css("left", -$(window).scrollLeft());
3});

投稿2020/12/13 10:54

編集2020/12/13 11:50

hatena19

総合スコア34073

deresuke

2020/12/13 11:06

hatena19様ご回答ありがとうございます! min-widthを設定したところ幅自体は1280pxに設定できました! しかしこのサイトの様に画面幅を狭めた際にその他のコンテンツと一緒に横スクロールする形にはならなかったです、、質問の仕方が悪くて申し訳ありません。

hatena19

2020/12/13 11:13

bodyか親要素にoverflow: hidden; が設定されていたりしませんか。そうでないなら、現象を再現できるコードを提示するか、実際のサイトのURLを提示するかしないと、原因を指摘するのは難しいです。

deresuke

2020/12/13 11:28

そうですよね、、失礼しました! 一応該当部分のコードを追加しました。サイト自体はクライアント案件のため公表はできませんが症状としては下記サイトと同じです。 https://www.alinco.co.jp/ 画面幅を狭めた場合にはみ出した分のヘッダーのコンテンツが表示されなくなります。画面幅に合わしてコンテンツ内容も縮小すれば解決はするのですが、、どうにも気になった次第です。

hatena19

2020/12/13 11:51 編集

あっ、なるほど。fixedだと画面基準なのでスクロールしませんね。質問のサイトはjQueryで移動させてますね。回答にコードを追記しましたのでご参照ください。

deresuke

2020/12/13 12:00

無事実装できました!! スクロールに応じて leftの数字を変えればいいのですね。助かりました。ありがとうございます!!

行動規範の内容に同意します