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

Question

我的问题与这个问题非常相似，除了固定元素可能会在应用程序生命周期（其他数据、视口更改等）期间动态改变其高度。

我正在使用setInterval()函数以 100ms 的间隔更新内容元素的偏移量，具体取决于标题高度。

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

更新：随着时间的推移和网络的发展， 位置：粘性

header{
    position: sticky;
}

旧答案：

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

header{
    position: relative;
}

并添加一些监听器来滚动事件。

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

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

不幸的是它不适用于大多数触摸设备