特定のブラウザの幅でjQuery関数をトリガーする

Question

他の要素の高さに基づいて要素に余白を追加するこのjQuery関数があります。

私はウィンドウのサイズ変更でこの機能のトリガを再度実行しようとしています。 （好ましくは1200px、991px、768px、500pxのブレークポイント）

ブラウザリサイズで機能をトリガーできる優れたソリューションがある場合は、さらに優れています。私はちょうどこれが「遅れ」または「遅さ」の原因となることを確認する必要があります。たとえば、サイズ変更イベント中に機能が100回トリガされるためです。ここで

は私の現在の機能を備えたcodepennです：

http://codepen.io/bruno-gomes/pen/vgRbBB

コード：

jQuery(document).ready(function($) { 
    (function() { 
     var navBarHeight = $('.header').height(); 
     $('.content').css('margin-top', navBarHeight); 
    })(); 
}); 

アイデアは、私がコンテンツをカバーしないように固定ヘッダをしたいということです、との大きさヘッダーはブラウザーの幅によって異なります。この機能は、ロード時に1回だけトリガされるため、ブラウザのサイズを変更すると問題になります。

Joomlaサイトであり、それ以外の方法で正しく動作しないため、私はIIFEの設定をしています。

Answer 1

あなたはその

Answer 2

ため.resize()を使用することができます。このアプローチは、^私のすべての問題を解決するようにOKがそうです。^役立つように思えたの

jQuery(document).ready(function($) { 
    var height = $('.header').height(); 
    resizeHeader(height); 
    $(window).resize(function() { 
    var height = $('.header').height(); 
    resizeHeader(height); 
    }); 
    function resizeHeader(height) { 
    $('.content').css('margin-top', height); 
    } 
});