Question

I have a sticky div but I need it to stop at a certain point toward the bottom. Sure in the example (link below) it never hits bottom, but if I have a div with a bigger width I want it to stop before it hits my footer. Let me know if you don’t understand the question, help would be great.

http://blog.yjl.im/2010/01/stick-div-at-top-after-scrolling.html

Answer 1

Here is a jquery plugin that may solve this for you. This plugin will fix the element to the top of the page, as you have in your example; and, if you set the optional limit to the top of the element you want to stop at, it should move up the page as it is scrolled. You will have to add the height of the “fixed” element to the limit to get it to move up the page again before it touches the element you do not want it to touch, plus some margin if desired.

Here is a fiddle that demonstrates this: http://jsfiddle.net/ZczEt/2/

Here is the plugin and its source: https://github.com/bigspotteddog/ScrollToFixed

// the limit is optional, but it will make the header move up the
// page again once it reaches the 7th paragraph
$(document).ready(function() {
    $('.header').scrollToFixed( { limit: $($('h2')[7]).offset().top } );
});

I forgot to mention, this plugin will also fix that hitch in the content below your sticky header when it goes fixed. In your example, if you scroll slowly, you will notice that the content jumps the height of the header when it becomes fixed. This plugin compensates for that.