Scrolling div, to fixed, to scroll again

Question

I have a page layout where a full width image is at the top, then on the right there is text content. On the left, there is a small scrolling div with social links in.

It's like this: http://blog.teamtreehouse.com/building-a-jquery-sticky-sidebar-navigation-menu (social links scroll, then become fixed, then scrolls from another div).

Here is an example, but without the final piece of the puzzle below: http://jsfiddle.net/nwFrg/

            function sticky_relocate() {
          var window_top = jQuery(window).scrollTop();
          var div_top = jQuery('#e-c-r-top').offset().top ;
          if (window_top > div_top)
            jQuery('.socialbar-left').addClass('fixedsocialbar')
          else
            jQuery('.socialbar-left').removeClass('fixedsocialbar');
          }
        // If you have jQuery directly, use the following line, instead
         jQuery(function() {
        // If you have jQuery via Google AJAX Libraries
        // google.setOnLoadCallback(function() {
          jQuery(window).scroll(sticky_relocate);
          sticky_relocate();
          });

When we get to the red footer, I want the 'hello box' to stop and stay there, aligned to bottom (until the person scrolls up again, then all should happen in reverse again.

If someone can help tell me with the js to go from scrolling, to fixed (which is already in my example) and then a third trigger for bottom, i already know the css that will align it to bottom, just need the js trigger.

I hope I've explained this OK.

Answer 1

You probably don't need to bother with the whole fixed/scroll switch. Instead, have the javascript limit the upper and lower end of the range. If the user scrolls past either end, just ignore those numbers and use the min/max instead. (You can get the min/max by reading the position of the appropriate elements on the page.)