画面上部に固定されたナビゲーションメニューを配置するときにはちょっとした調整が必要です。

例えばカミナリではスマホ表示だと現在このように表示されます。

これは調整後の状態なので問題ありませんが、調整前はこんな形になります。

「ランチ」というふりがなが見えなくなってしまいましたね。これは画像の一部が固定ナビゲーションの裏に隠れてしまっているために起きています。

こういったことが起きないよう、本文ブロック上部に固定ナビゲーションと同じ高さのマージンやパディングを追加して対応します。

さて問題なのがこの固定ナビゲーションの高さが、画面の幅によって変化してしまう場合です。そうすると対応がとても難しくなってしまいます。

というわけで、そのへんの処理を自動化してくれる jQuery のプラグインを作りました。

$.fn.fixedHeaderAdjuster = function(options){
  'use strict';
  options = $.extend({
    property: 'padding-top',  // 固定ヘッダーと同じ値にするプロパティ名
    target: 'body', // プロパティを調整する要素
    adjust: 0,      // プロパティの値を adjust 分加算
  }, options);
  var $this = $(this),
      $target = $(options.target),
      initial = $this.css(options.property);
  
  update();
  $(window).on('resize load', update);
  
  function update(){
    var v;
    if($this.css('position') === 'fixed'){
      v = $this.outerHeight() + options.adjust + 'px';
    }else{
      v = initial;
    }
    $target.css(options.property, v);
  }
};

jQuery本体を呼び出した後にこのスクリプトを実行させます。
あとは固定ナビゲーションの要素に対してこのプラグインを使います。

$(function(){
  $('#fixed-header').fixedHeaderAdjuster();
});

これで固定ナビゲーションの高さが変わりそうなタイミングで自動的に調整してくれるようになるので固定ナビゲーションと本文の重なりを気にしなくても大丈夫になりますよ。

なお、position: fixed; ではない場合は自動的に調整前の初期状態に戻しますので、画面幅によって固定ナビゲーションを使わなくなる場合にも利用できます。