在特定的不同浏览器宽度下触发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);
  }
});