在特定的不同瀏覽器寬度下觸發jQuery函數

Question

所以我有這個jQuery函數，它根據另一個元素的高度將margin-top添加到一個元素。

我試圖讓此函數在窗口調整大小時再次觸發。 （最好是1200px，991px，768px，500px斷點）

如果有一個好的解決方案，允許該功能在任何瀏覽器調整大小時觸發，甚至更好。 我只需要確保不會由於函數在調整大小事件期間觸發100次而導致“滯后”或“緩慢”。

這是我當前功能的代碼penn：

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

碼：

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

我的想法是，我希望固定標題不覆蓋內容，並且標題的大小將根據瀏覽器的寬度而變化。 當用戶調整瀏覽器大小時，這成為一個問題，因為該功能僅在加載時觸發一次。

我有這樣的IIFE設置，因為它是一個Joomla網站，否則它們不能正常工作。

Answer 1

您可以使用.resize()

Answer 2

好的，好像這種方法解決了我所有的問題^。^

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);
  }
});