読者です 読者をやめる 読者になる 読者になる

【Bootstrap】ヘッダ固定時の地味に嫌な問題に対応する

Bootstrapでヘッダ固定した場合、navbarの高さ分bodyの開始位置を下げる必要があります。 ヘッダの高さが予めわかっている場合は、固定値でbodyに対してpaddingすれば対応できますが ウィンドウサイズ変更などでヘッダ内改行が発生する場合、bodyがヘッダに隠れてしまいます。

今回はその対応を備忘録として記載します。

・・・その前に、忙しい方のために結論ですが、javascriptで以下の処理を追加します。

$(window).on('load resize', function(){
    // navbarの高さを取得する
    var height = $('.navbar').height();
    // bodyのpaddingにnavbarの高さを設定する
    $('body').css('padding-top',height); 
});

前提

  • Boostrap3 v3.3.7
  • jQuery 1.1.11

現象の整理

問題を再現させるため以下のページを用意します。

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li role="separator" class="divider"></li>
        <li><a href="#">Separated link</a></li>
        <li role="separator" class="divider"></li>
        <li><a href="#">One more separated link</a></li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>
<h1>あいうえおきかけこたちつてとあああああああああああああ</h1>
</body>

以下のような表示になります。

①ヘッダ内改行なし(横幅最大)

f:id:sawarasawara:20161015232532p:plain:w500

②ヘッダ内改行あり(横幅中くらい)

f:id:sawarasawara:20161015231511p:plain:w500

③ヘッダ内改行なし(横幅最小)

f:id:sawarasawara:20161015232655p:plain:w500

文字が隠れてしまっていますね。

一般的な対応

単純に、スタイルシートに以下の記載を追加して、bodyの開始をずらします。

body { padding-top: 70px; }

しかしこれでは「②ヘッダ内改行あり(横幅中くらい)」の場合に対応できません。 それを解決するのが次項になります。

高さの変化に対応

高さの変化に動的に対応するため、javascriptに以下の記載を追加します。

$(window).on('load resize', function(){
    // navbarの高さを取得する
    var height = $('.navbar').height();
    // bodyのpaddingにnavbarんぼ高さを設定する
    $('body').css('padding-top',height); 
});

これで、以下の通り全てのパターンに対応できました。 *1

f:id:sawarasawara:20161015233419p:plain:w500f:id:sawarasawara:20161015233425p:plain:w500f:id:sawarasawara:20161015233435p:plain:w500f:id:sawarasawara:20161015233444p:plain:w500

まとめ

以上、対応を記載しました。 もしどなたかのお役に立てれば幸いです。

読んでいただきまして、ありがとうございました!

*1:ページロードとウィンドウサイズ変更以外のトリガでヘッダの高さが変わる場合は、そのイベントにも同様の処理を追加する必要があります。