javascript - 使用 setIntervel() 偏移具有动态高度的固定标题的页面上的内容

Question

我的问题与this one 非常相似除了固定元素可能会在应用程序生命周期期间动态更改其高度(其他数据、视口(viewport)更改等)。

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

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

这里是 jsfiddle为此(更改结果页面的宽度以查看其工作方式)。

就用户体验而言，它看起来很棒，但我很好奇是否有更好的方法？

这种方法有什么缺点？

Answer 1

主要缺点是您每 100 毫秒消耗一次 CPU。大多数时候它什么都不做。

有更好的方法。只需在固定元素更改高度后发出一个事件并将您的 css 调整绑定(bind)到它。像这样的东西:

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

无论高度变化和

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