Sticky Div stops @ bottom

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

---

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.

---

It's a bit of a departure from the example, but I think this does what you're after:

function sticky_relocate() {
    var window_top = $(window).scrollTop();
    var div_bottomEdge = window_top + $('#sticky').outerHeight();
    var avoid_top = $('#avoidMe').offset().top;
    if (div_bottomEdge < avoid_top) $('#sticky').css('top', window_top);
}

$(document).ready(function() {
    $(window).scroll(sticky_relocate);
    sticky_relocate();
});

See this jsFiddle Example for more details

---

i have used jquery plugin

 https://github.com/garand/sticky

to stop at bottom:

 (function($) {

    var limit_bottom=$('#footer').height(); 
    $('.product-box').sticky({topSpacing:0, bottomSpacing:limit_bottom});
   })(jQuery);