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

Question

My problem is very similar to this one except the thing that fixed element may change his height dynamically during application lifecycle (other data, viewport change, etc... ).

I'm using setInterval() function with 100ms interval to update offset of content element depending on header height.

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

Here is jsfiddle for it ( change the width of the resulted page to see how it works ).

For user experience it looks just great, but I'm curious is there a better way?

What are the disadvantages of this approach?

Answer 1

The major disadvantage is that you consume CPU every 100ms. And it doesn't do anything most of the time.

There is a better way. Just emit an event after the fixed element changes height and bind your css adjusment to it. Something like:

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

wherever the height changes and

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

Answer 2

I suppose you can use jquery.ba-resize.js library. Here is a link: http://benalman.com/projects/jquery-resize-plugin It allows you to use resize event on any DOM element. But if I'm not mistaken this library uses setTimeout functionality and I'm not sure that's better in performance.

Answer 3

UPDATE: time goes and web evolve, position: sticky

header{
    position: sticky;
}

Old Answer:

Here is another solution that comes to my head. I was thinking how would be great have such position : fixed-relative :) (That fixed on viewport but doesn't desapear from normal flow) And here is an idea how to emulate this behaviour. Set header element position as relative.

header{
    position: relative;
}

And add some listner to scroll event.

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

It's much pretty than have infinity loop with setInterval or trigger some event across your application.

Unfortunately it will not work on most touch devices