2021.7.24

【js】position:fixed;が指定されたヘッダーの高さを取得して、コンテンツを下げる

  • WEB
  • テクニック
【js】position:fixed;が指定された ヘッダーの高さを取得して、 コンテンツを下げる

ヘッダーをposition:fixed;で固定して追従させると、下の要素がかぶってしまいます。そんなときに便利なjsをご紹介します。

marginやpaddingでヘッダーの高さ分余白をつけるやり方も間違いではないですが、もっとスマートな方法をjsで実装してみましょう。

サンプル

See the Pen
by nanami (@nanami_po)
on CodePen.

js

メインとなるjsの解説です。

$(function() {
var height=$("header").height();
$("body").css("margin-top", height);
});

 

var height=$(“header”).height();でヘッダーの高さを取得します。

例えば

var height=$(".class").height();

であれば、classがクラス名についた要素の高さを取得できます。

 

$(“body”).css(“margin-top”, height);でbodyに先ほど取得したヘッダーの高さを付与しています。

検証で見てみると

<body style="margin-top: 40px;">

というふうになっていると思います。

 毎日ゆるく楽しく生きたい 中の人:白井ぽんず profile HOME HOME BLOG BLOG BLOG WORKS MAIL CONTACT コピペできるWebパーツ集 WEB PARTS よく使う実装コード集 CODE Twitter< 更新ツイートしてます Instagram< 読書記録 検索 CATEGORY App・Gadget (1) book (26) design (12) HTML・CSS (30) JavaScript (4) video (7) WordPress (10) TAG CSS HTML php premiere SEO WEB アイテム アイデア アプリケーション イラスト カスタム投稿タイプ コミュニケーション コーディング ストレス タブ切り替え ターム ダイエット テクニック デザイナー ブログ ヘルスケア マインド メニュー ライフスタイル 人生 仕事術 動画 動画編集 小技 文章術 時間 英語 集中力 2021.7.24 JavaScript 【js】position:fixed;が指定されたヘッダーの高さを取得して、コンテンツを下げる

この高さの指定がjsで実装すれば自動で取得できるというわけです。

 

 

ちなみに、ヘッダーの下に余裕を持たせたい場合は

$("body").css("margin-top", height + 10);

と表記すれば、ヘッダーとコンテンツの間にプラス10pxの余白を作ることができます。

 

以上で実装は完了です。良かったら参考にしてください◎

 

Share Please

Read this too