How to detect the height of elements when the window is resized?


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!

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.