How to live detect elements height when window is resized?

Question

I have a fixed topbar on my site, and I'm adding a padding-top to the body element based on the topbar height.

$('body').css('padding-top', $('.topbar').height());

But when I resize window and topbar becomes heigher the above jQuery code is not working until I refresh the page on desired viewport.

How to detect the topbar height live, even when window is resized?

Any help very appreciated!

Answer 1

jQuery has a .resize() event. So you could try:

 $( window ).resize(function() {  

 $('body').css('padding-top', $('.topbar').height());

 });

If this doesn't work, make a fiddle and we can have a look at how your page is working.

Answer 2

You need to listen for a resize event:

$(window ).resize(function() {
    $('body').css('padding-top', $('.topbar').height());
});