レスポンシブで変化する画像の高さ分のmarginを指定

Question

position fixedとz-indexでスクロール時に下に潜り込ませるようにし、かつレスポンシブで変化する画像の下に
いかなる画像の大きさの時も次の要素が付いてくるようにしたいのですが、
以下のソースだとページ読み込み時の一回しか動かず、
読み込み後ウィンドウの大きさを変化させてもmargin-topの値が変化しません。
何が原因でしょうか？

<img class="topimg" src="img/aaa.jpg" alt="" width="100%">
<div class="menu">
</div>

.topimg {
  position: fixed;
  z-index: -1;
}

$(function() {
  var height=$(".topimg").height();
  $(".menu").css("margin-top", height + 10);//10pxだけ余裕をもたせる
});

Answer 1

window イベントを再確認してください。

ページ読み込み時の一回しか動かず

jQuery の実装として $(function() {}); は 「DOMContentLoaded イベントへの登録/document.readyState==completeのときは即実行」ですので最初の１回だけになります。

ウィンドウの大きさを変化させても

onresize イベントが発火しますので、イベントリスナを登録します。
（PCでブラウザのwindowサイズを変更させた場合も発火）

$(window).resize(function() {
  //リサイズされたときの処理
});

---

モバイル端末に限られそうですが、端末を回転させたあとに発火する orientationchange イベントもあります。

$(window).bind("orientationchange",function(){
  //デバイスが回転されたときの処理
});

Answer 2

読み込み後ウィンドウの大きさを変化させてもmargin-topの値が変化しません。

何が原因でしょうか？

そのイベントに対して処理を書いていないからです。

【.resize() | jQuery API Documentation】
https://api.jquery.com/resize/

Comments

[machaking]

ありがとうございます、解決できました。