ウェブサイトの幅を変更しながらメインのオフセットを変更

Question

はサイトの上部に固定された写真であり、すべてのコンテンツでメインに始まります。最初は私のメインのオフセットに問題がありましたが、最終的にはわかりましたが、ウィンドウのサイズを変更すると、ページがリフレッシュされるまでオフセットが変更されません。これを修正する方法はありますか？窓のサイズを変更してページの一番上に来ると、メインのオフセットの高さが上の写真と同様に変化します。ここに私のCSである：

#first_image { 
     width : 100%; 
     min-width: 1100px; 
     position: fixed; 
     top : 0; 
     left : 0; 
     z-index: -2; 
     } 

     main { 
     width:100%; 
     position:relative; 
     top:; 
     background-color: black; 
     z-index: 100; 
     padding-top:25px; 
     } 

JS：

var img = document.getElementById('first_image'); 
var height = img.clientHeight; 

$(".maintext").css({ top: height }); 

EDIT：メインのクラスは.maintextです。

Answer 1

$(window).resize();イベントハンドラで同じコードを呼び出します。ここでは、画像を関数にサイズ変更するために行っていることを追加して、ページが読み込まれたときに関数を単独で呼び出すことができ、ウィンドウのサイズが変更されたときに関数を呼び出すことができます。

$(function() { 
    function imageHeight() { 
    var img = document.getElementById('first_image'); 
    var height = img.clientHeight; 
    $(".maintext").css({ top: height }); 
    } 
    $(window).resize(function() { 
    imageHeight(); 
    }); 
    imageHeight(); 
});