Question

Here an example http://jsfiddle.net/NuzDj/

If you resize windows size, sidebar overlapping the wrapper & footer.

How do I push the wrapper height automatic when sidebar overlap them?

Answer 1

After working this out for about the past half hour, I figured the easiest way to do this would be manually check for the point of scroll past the end of the content at which point removing the fixed class from sidebar allowing content which passed after this to show as intended, however to sneakily hack it to make it appear as though it was still in the same place a margin-top is applied aswell to the sidebar to keep it sitting at it’s end point after scrolling to the end of content.

here is the jsfiddle: http://jsfiddle.net/mikeymagic/yxh8m/3/

with this bit of jquery magic:

 var sidebarheight = $('.sidebar').height();
 var contentheight = $('.content').height();

 if (y > (contentheight - sidebarheight)) {
     $('.sidebar').css({marginTop: contentheight - sidebarheight - 10});
     $('.sidebar').removeClass('fixed');
 }
 else 
    {
     $('.sidebar').css({marginTop: '0'});
     $('.sidebar').addClass('fixed');
    }

this is inserted inbetween this

 var y = $(this).scrollTop();
    if (y >= top) {
      $('.sidebar').addClass('fixed');

and this:

} else {
      $('.sidebar').removeClass('fixed');
    }
  });
});​