javascript - How to make a sticky sidebar float only within a parent container -

pls used jquery code make sidebar sticky, floats footer of page , covers it, pls how can make stop @ bottom of parent container (ie outer-wrapper)

$(function() {      var $sidebar   = $("#sidebarfo"),          $window    = $(window),         offset     = $sidebar.offset(),         toppadding = 170;      $window.scroll(function() {         if ($window.scrolltop() > offset.top) {             $sidebar.stop().animate({                 margintop: $window.scrolltop() - offset.top + toppadding             });         } else {             $sidebar.stop().animate({                 margintop: 0             });         }     });  }); 

sorry, couldn't code work on jsfiddle, have uploaded it, live example can found here: http://www.wilburtech.com. pls scroll down page "follow us" widget.

i got script https://css-tricks.com/examples/scrollingsidebar/

so far step have taken use z-index hide behind footer.

i try making use of .scrollheight() , setting $window.scroll use range, maybe this:

    var $sidebar   = $("#sidebarfo"),          $window    = $(window),         offset     = $sidebar.offset(),         toppadding = 170,         footerheight = xxx;      $window.scroll(function() {         if ($window.scrolltop() > offset.top < ($window.scrollheight() - footerheight)) {            //animation stuff.            }     });