使用setIntervel（）来偏移页面上具有动态高度的固定标题的内容

Question

我的问题与this one非常相似，只是固定元素可能会在应用程序生命周期（其他数据，视口更改等）中动态更改其高度。

我使用setInterval()函数，间隔为100毫秒，根据标题高度更新内容元素的偏移量。

jQuery(function($){
    setInterval(function(){
        $('article').css('padding-top', $('header').outerHeight());
    }, 100)
});

以下是jsfiddle（更改结果页面的宽度以查看其工作原理）。

对于用户体验，它看起来很棒，但我很好奇有更好的方法吗？

这种方法有哪些缺点？

Answer 1

主要缺点是每100毫秒消耗一次CPU。而且大部分时间它都没有做任何事情。

有一种更好的方法。只需在固定元素更改高度后发出一个事件，然后将css调整绑定到它。类似的东西：

$(document).trigger('my_element_changed_height');

高度变化的地方

$(document).on('my_element_changed_height', function() {
    $('article').css('padding-top', $('header').outerHeight());
});

Answer 2

我想你可以使用jquery.ba-resize.js库。这是一个链接：http://benalman.com/projects/jquery-resize-plugin 它允许您在任何DOM元素上使用resize事件。但如果我没有弄错，这个库使用了setTimeout功能，我不确定它的性能会更好。

Answer 3

这是我的另一个解决方案。我在想怎么会有这样的position : fixed-relative :) （固定在视口但不会从正常流程中消失）这里是an idea如何模仿这种行为。将标题元素位置设置为相对。

header{
    position: relative;
}

并添加一些列表器来滚动事件。

jQuery(function($){
    $(window).scroll(function(){
        $('header').css('top',$(this).scrollTop() );
    });
});

它比使用setInterval的无限循环或在应用程序中触发某个事件要漂亮得多。

不幸的是它不适用于大多数touch devices