bootstrapでsticky-topを使って、固定する場合幅を持った固定をしたい場合

Question

bootstrapでsticky-topを使って、スクロールしても上部に固定するようにしました。
しかし、文字が重なってしまうので、固定する部分に幅を持たせたい場合どうすればいいでしょうか？
（縦方向に幅を持たせて、スクロールしても、headerがスクロールされる文章と重ならないように）

このteratailのページのように固定されるようにしたいです。自分のHTMLだと、固定されてスクロールはされないのですが、スクロールした文字と重なってしまいます。

<header class="sticky-top">
      <nav class="nav">
      <a href="#"><i class="fas fa-campground fa-2x"></i></a>
      <nav class="nav">
    </header>

bootstrapは、5．0.0です。

Answer 1

こんにちは。

固定する部分に幅を持たせたい

たとえば、<header class="sticky-top col-6">とすれば、半分の大きさになると思います。

Comments

[dobashi]

こんにちは！

ご回答ありがとうございます。

書き方が悪くてすみません。

縦方向に幅を持たせて、スクロールしても、headerがスクロールされる文章と重ならないようにしたいということでした。

[Lhankor_Mhy]

重ならないようにヘッダの高さの分だけ空けておく、ということですよね？
fixed ならできると思いますが、sticky では難しいのではないかと思います。

[dobashi]

そうです。
bootstrapで調べて、fixed-topというクラスを使ってみたのですが、やはりヘッダの高さがなく、スクロール文字と重なってしまいます。

[Lhankor_Mhy]

fixed の場合はビューポートに固定するので、別の要素でoverflow: autoなどとしてスクロールコンテナにすれば、ご希望に近いことができると思います。色々弊害もあるでしょうけれども。

[Lhankor_Mhy]

あ、いや、その場合はfixedにする必要もないですね。

[dobashi]

headerのCSSに、overflow: auto;と追加したのですが、やはりスクロールすると文字が重なってしまいます。どのようなコードで書けばいいのでしょうか？

[Lhankor_Mhy]

overflow: auto とするのは、ヘッダーではなくて、スクロールさせるボックスですね。

[dobashi]

実際のコードだとnavのところのCSSに入れればいいのでしょうか？それでもだめでした。
スクロールさせるボックスとはどういうことでしょうか？コードはどうなりますでしょうか？

[Lhankor_Mhy]

質問は、スクロールするとヘッダーに文字が隠れる、という問題ではなかったでしたか？
ということは、スクロールが起きるということですから、スクロールさせたいもの（スクロールコンテナ）があるはずですよね？

[dobashi]

このteratailのように、ヘッダーが固定しているようにしたいです。質問の文章をスクロールしても、ヘッダーの下で隠れるようにです。
スクロールさせたいものは、divで４つほどあります。そのdivのクラスにoverflow: autoを入れたのですが、やはりスクロールすると、固定されているヘッダーに重なってしまいます。

[Lhankor_Mhy]

> ヘッダーの下で隠れるように

ご質問では、「文字が重なってしまう」ということだったので、固定ヘッダーとスクロールするコンテンツを重ねたくないのかと思いましたが、そうではなくて、固定ヘッダーとスクロールするコンテンツを重ねたいのですか？

[Lhankor_Mhy]

ヘッダーとスクロールしてくるコンテンツを重ねるのであれば、現在のスタイルでいいはずですよ。

[dobashi]

固定ヘッダーとスクロールするコンテンツは重ねたくないです。このサイトのようにヘッダの下だけでスクロールするようにしたいです。

[Lhankor_Mhy]

ヘッダの下をスクロールする、というのは重なっているのではないですか？
実際に、teratailでも重なっていますし……

[Lhankor_Mhy]

あー、もしかして、重ね順が逆になっているのですか？
だとしたら、問題が再現するコードを拝見しないと何とも言えないですが、z-index を指定することによって解決するかもしれません。

[dobashi]

teratailのようにヘッダとスクロールする文字が重ならないようにしたいです。
重ね順は、<header>があって、その下にスクロールする<div>が4つあります。

[Lhankor_Mhy]

重ならないけど隠れている状態、とはどういうことでしょうか。
隠れている、というのは、上に何かが重なっている状態ではありませんか？
もう少し詳しくご説明いただけませんか？

---

表現するための言葉がわからない時は表現の仕方を工夫しましょう
https://teratail.com/help/question-tips#questionTips3-3-1

[Lhankor_Mhy]

もしかして、ヘッダに背景色を置きたい、ということでしょうか？
であれば、ヘッダに.bg-lightなどをつければいいです。

[dobashi]

背景色ではないです。teratailのサイトでいうと、ヘッダーの検索窓とかあると思うのですが、スクロールするとその検索窓のところまで、質問のやりとりが上がってしまい重なってしまうのです。
teratailはスクロールしても、ヘッダ部分（灰色背景部分）には、スクロール文字が入っていきません。

[Lhankor_Mhy]

とすると、やはり重ね順でしょうね。
おそらく、position-absolute などを使っているのだと思います。

コードをご提示いただけないとなんとも言えませんが、z-indexで解決するかもしれません。
お試しになりましたか？

[dobashi]

z-indexで数字を指定しましたが、やはり改善されません。

念のため、サーバーにアップしました。
http://spiritualcompany.net/portrait/mosya1/index.html

左上のテントみたいなマークがheaderで固定されています。

[Lhankor_Mhy]

左上のテントみたいなマークが、何かの下に隠れる、という現象を確認できませんでした。
問題が再現する条件をご提示いただけますか？

[dobashi]

テントが何かに隠れるのではなく、テントとスクロールする文字が重なるということです。
スクロールすればいつでも再現します。
スクロールする文字がテントまで行く前に隠れてほしいです。

[Lhankor_Mhy]

うーん、やはり、背景色をつけたいというご質問ではありませんか？
<header class="fixed-top bg-light"> を試していただけませんか？

[dobashi]

ありがとうございます！
解決しました。背景色を付けると、隠れてくれるのですね。
大変お手数おかけしました。