Question

所以我有这个jQuery函数，它根据另一个元素的高度为一个元素添加margin-top。

我试图在窗口调整大小时再次触发此功能。（优选1200px，991px，768px，500px断点）

如果有一个好的解决方案允许该功能在任何浏览器调整大小时触发，甚至更好。我只需要确保这不会导致＆＃34;滞后＆＃34;或者＆＃34;缓慢＆＃34;例如，由于函数在调整大小事件期间触发了100次。

这是一个具有当前功能的codepenn：

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

您可以{/ 3}}使用

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

在特定的不同浏览器宽度

2 个答案: