可変するヘッダ固定バナー（jsで高さを取得する方法） │ ここつぶ

スクロールしても、常に画面上に固定で表示されているヘッダメニューの実装はよくありますが、固定バナー（画像）の実装方法があまり紹介されていなかった（気がした、、、）のでここで自分メモ用に残しておきたいと思います。
固定メニューの場合、横幅が広がるのみで高さに変化のない場合が多いと思いますが、画像の場合は高さが画面サイズによって可変するのが今回の肝ですね！！

今回は私でも出来るCSSとjqueryで実装しました。

実装の概要は以下となります。
position: stickyが使用できればjsの実装が必要なくなるのですが、IEに非対応の為今回はposition: fixed;で実装しました。
IEやAndroid4.4を対応範囲外に出来る場合はposition: stickyがシンプルで良いですね！！
position: stickyの対応ブラウザはこちらから確認できます😊

・画像をposition: fixed;で固定
・jsで画像の高さを取得し、高さ分画像下のコンテンツにmargin0-topを取る

デモサイトはこちら！
画面サイズを変更したら、リロードし、スクロールして確認してみてください。

DEMO

1. HTML
2. CSS
3. jquery

HTML

<div class="head_banner">
  <a herf="https://cocotsubu.com/" target="_blank" rel="noopener">
    <img src="img/banner.jpg">
  </a>
</div>
<header id="header">
  <P>ヘッダメニュー</P>
</header>
<div class="contents">
  <P>コンテンツ</P>
</div>
<footer id="footer">
  <P>フッタメニュー</P>
</footer>

CSS

#header, #footer {
  padding: 4px;
  width: 100%;
  background-color: #ccc;
  height: 50px;
}

.contents {
  height: 10000px; /* スクロールの確認用 */
}

.head_banner {
  position: fixed; /* 画像固定 */
  top: 0;
  margin: 0;
  width: 100%;
  z-index: 1000;
}

.head_banner a {
  display: block;
}

.head_banner a img {
  width: 100%;
  vertical-align: bottom;
}

@media screen and (max-width:768px) {
  p {
    font-size: 1.6rem;
  }
}

jquery

//ヘッダーの高さ分だけコンテンツを下げる
$(function() {
    var height=$(".head_banner").height();
    $("#header").css("margin-top", height);
})

var height=$(“.head_banner”).height();で.head_banner（画像）の高さを取得します。
#headerに取得した高さ分margin-topを付与します。
これで高さが可変する固定バナー（画像）以下のコンテンツが、画像に隠れることなく表示させることができました！！

おすすめのjQuery参考書はこちら！