• カミナリツイッターカミナリtwitter
  • カミナリフェイスブックカミナリfacebook
  • カミナリインスタグラムカミナリinstagram

山陰の情報を発信するカミナリ

ナビ

30

MAY

ウェブTUESDAY 2017 / 5 / 30

固定ヘッダーの高さ分、本文の配置を調整するjQueryプラグイン : fixedHeaderAdjuster

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

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

 

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

 

 

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

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

 

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

というわけで、そのへんの処理を自動化してくれる 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; ではない場合は自動的に調整前の初期状態に戻しますので、画面幅によって固定ナビゲーションを使わなくなる場合にも利用できます。

 

 

松本博之隠しプロフィール画像

TEXT by

松本 博之まつもとひろゆき)

1978年、鳥取県米子市生まれ。
株式会社カミナリ WEBシステムの開発・運用を担当。

この人が書いた他の記事を読む