Prevent scroller sidebar to overlap with footer

Question

I have one sidebar with code

 <section>
   <div class="8u">
   </div>
   <div class="4u">
      <div id="sidebar"> 
        <div id="scroller-anchor"></div> 
          <div id="scroller" style="margin-top:10px; width:270px"> 
            Content Here
          </div>
        </div>
       </div>
    </div>
     </section>
     <footer>Content Footer</footer>

NOw my problem is that when i scroll the screen then sidebar scrolls smoothly but when sidebar reaches at footer then sidebar overlap the footer content. I want that sidebar should remain at last position when footer start is reached.

My JQuery Code to scroll the sidebar is:

   //<![CDATA[ 
     $(window).load(function(){
       $(function() {
      var a = function() {
      var b = $(window).scrollTop();
      var d = $("#scroller-anchor").offset().top;
      var c=$("#scroller");
    if (b>d) {
       c.css({position:"fixed",top:"50px"})
     } else {
      if (b<=d) {
       c.css({position:"relative",top:""})
      }
     }
    };
    $(window).scroll(a);a()
  });
  });//]]>  

Please help here. Link to my JS Fiddle

Answer 1

Instead of using fixed, keep absolute and use the scrolltop as a top coordinate of the #sidebar (or add to it):

  SEE FIDDLE HERE

 

** EDITED ** Use $("#scroller").height()instead of $("#sidebar").height()

//<![CDATA[ 

$(function () {

    var a = function () {
        var b = $(window).scrollTop();
        var d = $("#scroller-anchor").offset().top;
        var f = $("#footer").offset().top;
        var c = $("#scroller");
        var h = $("#scroller").height() + 20; // margin

        if (b > d) {
            var myTop = $(window).scrollTop();
            if (myTop > f - h) myTop = f - h;
            c.css({
                position: "absolute",
                top: myTop,
                bottom: ""
            })
        } else {
            if (b <= d) {
                c.css({
                    position: "absolute",
                    top: "",
                    bottom: ""
                })
            }
        }
    };
    $(window).scroll(a);
    a()

}); //]]>

This way if you manually set the vertical position (instead of leaving it to "fixed") you can compare it to other elements in the page and alter it in any way you wish.