Search code examples
jqueryheightpaddinglive

How to live detect elements height when 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!

Solution

  • 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.