Sticky Div stops @ bottom

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

I don't understand the question. You want the sticky div to stop scrolling when it meets a div with a bigger width or... what? — Sam Martin, Aug 25 '11 at 16:45
@Toukakoukan resize the page to like 100px high and you'll see what the poster means — Joseph Marikle, Aug 25 '11 at 16:47
I want it to be fixed, but since I have a big div, it goes over my footer. Instead I want the #sticky div to stop at a certain point toward the bottom so it is not hovering over my footer. In the example in the link it Starts scrolling when it hits the
and stop when it hits that same div. I need an effect like that toward the bottom though. — Howdy_McGee, Aug 25 '11 at 16:53
Check this plugin: http://stackoverflow.com/a/8298172/104380 — vsync, Dec 13 '11 at 08:55

score 3 · Accepted Answer · answered Aug 30 '11 at 19:48

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.

score 0 · Answer 2 · answered Nov 25 '13 at 11:17

0

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);

answered Nov 25 '13 at 11:17

Matoeil

6,851
11
54
77

score 0 · Answer 3 · answered Aug 25 '11 at 17:16

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

Sticky Div stops @ bottom

3 Answers3