ドキュメントが準備完了でドキュメントのサイズが変更されたときにイベントを呼び出す

Question

次のスクリプトを使用してdivのパディングトップを取得します。 divは、英雄像の高さからパディングトップを得ます。アクチュアイルスクリプトは、サイズが読み込まれたときに効果的ですが、ブラウザウィンドウのサイズを変更すると、パディングトップが再度計算されません。

jQuery(document).ready(function($) { 
    /***** CONTENT-WRAPPER PADDING FRONTPAGE *****/ 
    var $banner = $(".front header img"); 
    $banner.on('load', function(){ 
     var bannerHeight = $(this).height(); 
     console.log(bannerHeight); 
     $("#content-wrapper").css("padding-top", bannerHeight) 
    }); 
}) 

Answer 1

これを試してみてください：

jQuery(window).resize(function() { 
    var bannerHeight = $(".front header img").height(); 
    console.log(bannerHeight); 
    $("#content-wrapper").css("padding-top", bannerHeight) 
}); 

Answer 2

resize()イベントは、ウィンドウのサイズが変更されるたびに発生します。両方のイベントにあなたのハンドラをアタッチ：onReadyとresize：

function calcPaddingTop() { 
    // your logic here 
} 

jQuery(document).ready(calcPaddingTop); 
jQuery(window).resize(calcPaddingTop);