Stop the smooth sticky div sidebar in the footer (almost works)

Question

I want to get it so that the last div on my sidebar remains sticky when the page scrolls, but stops on the footer. I almost work with an online tutorial , but the calculation fades out when disqus comments are loaded and it only goes to a specific point.

Here's the working version of http://jsfiddle.net/k56yR/1/ , but is there an easy way to do something like calculate the height of the footer, and then say that it stops scrolling so far from the bottom of the page?

Answer 1

I think your problem is that your value of $('#footer').offset().top changes after loading your comments with disqus. So you need to update footerTop (and limit based on the new footerTop value) after loading comments or every time your event fires.

sort of:

 $(function(){ // document ready if ($('#sticky').length) { // make sure "#sticky" element exists var el = $('#sticky'); var stickyTop = $('#sticky').offset().top; // returns number var stickyHeight = $('#sticky').height(); $(window).scroll(function(){ // scroll event var limit = $('#footer').offset().top - stickyHeight - 20; var windowTop = $(window).scrollTop(); // returns number if (stickyTop < windowTop){ el.css({ position: 'fixed', top: 0 }); } else { el.css('position','static'); } if (limit < windowTop) { var diff = limit - windowTop; el.css({top: diff}); } }); } }); 

As in most cases, there is a jQuery plugin for it, as julianm indicated in his comment, available here . It also maintains a stopper value to stop the sticky box at any desired position.