5つ目のデザインカンプからのコーディング課題に取り組んでいる時に起きた、固定ヘッダーの謎の現象

現在、しょーごさんのコーディング課題【中級編】に取り組んでいます。ペースが落ちてきていますが、ちゃんとやってます^^;

現在、jQueryなどの動的な表現の実装も終えて、レスポンシブ対応に取り組んでいるところですが、初めてみた謎の現象に驚いたので、ブログに残しておきたいと思います。

今回のコーディング課題では、ヘッダーは上部固定してスクロールしても画面の上部に固定されるように設置しているのですが、これが不思議なことに、各セクション(ファーストビュー、ブログ、よくある質問、実績、お問い合わせ)によって、ヘッダーの横幅が伸縮しています。

例えば、1100pxほどの画面いっぱいで「お問い合わせ」のセクションにいる時は、ヘッダーの固定幅も同じ1100pxで、レスポンシブには問題ないように思えるのですが、これをスクロールして、「よくある質問」のセクションにいる時は、ヘッダーが1200pxに伸びて、画面スクロールが表示されてしまいます。

この時、「よくある質問」セクションは1100pxで画面幅と同じなので、問題ありません。

この謎の現象にちょっと困ってしまっています^^;

ちなみに、ヘッダーの上部固定はCSSで実装しています。CSSで表現出来るなら、出来るだけCSSで表現しようと思ってそうしました。

ただ、こうなってくると、jQueryで一旦実装してみようかな、という気持ちにもなってきました^^;

→しかしそれでは根本的な問題の解決になっていないような気がしてモヤモヤしているので、今のところ半ば意地になって問題解消に向けていろいろと調べたりコードをいじっています。

もし、解決できたら後日記事にしようと思います。

それでは、今日も頑張りましょうーー!

この記事を書いた人