javascript - jQuery scrolling DIV: stop scrolling when DIV reaches footer

Question

I have a #sidebar (which starts below my #header div) and a #footer (around 120px off the bottom of the page).

I'm trying to make the sidebar scroll with the content of the page. The code below does this semi-successfully:

/* profile sidebar */
#sidebar>div{ width: 300px; margin-top: 10px; }
#sidebar.fixed>div{position:fixed;top:0;}
#sidebar.fixed_bottom>div{position:fixed;bottom:172px;}

jQuery(function ($) {
    $.fn.scrollBottom = function() { 
        return $(document).height() - this.scrollTop() - this.height(); 
    };

    var el = $('#sidebar'),
    pos = el.position().top;

    $(window).scroll(function() {
        if ($(this).scrollTop() >= pos) {
            if ( $(this).scrollBottom() <= 172 ) { 
                el.removeClass('fixed');
                el.addClass('fixed_bottom');
            } else { 
                el.removeClass('fixed_bottom');
                el.addClass('fixed');
            }
        } else {
            el.removeClass('fixed');
        }
    });
});

The problem is, on smaller resolutions, this makes the sidebar "jump" once you reach a certain position on the page. It stops it from overlapping the footer (which is the problem if you remove the fixed_bottom class) but doesn't look good.

What I'd like to do is this: user scrolls to the bottom of the page, the sidebar scrolls along with the content until it reaches say 20px above the top of my footer, at which point it stays there until the user scrolls back up.

Thanks in advance,

Answer 1

I believe this should do what you want.

http://jsfiddle.net/FDv2J/3/

#sidebar>div{ width: 100px; margin-top: 10px; position:fixed; left: 0; top: 0;}

---

$(function() {
    $.fn.scrollBottom = function() {
        return $(document).height() - this.scrollTop() - this.height();
    };

    var $el = $('#sidebar>div');
    var $window = $(window);

    $window.bind("scroll resize", function() {
        var gap = $window.height() - $el.height() - 10;
        var visibleFoot = 172 - $window.scrollBottom();
        var scrollTop = $window.scrollTop()

        if(scrollTop < 172 + 10){
            $el.css({
                top: (172 - scrollTop) + "px",
                bottom: "auto"
            });
        }else if (visibleFoot > gap) {
            $el.css({
                top: "auto",
                bottom: visibleFoot + "px"
            });
        } else {
            $el.css({
                top: 0,
                bottom: "auto"
            });
        }
    });
});

I tried to break things up and name variables in such a way that it would be understandable. Let me know if there's anything you're unsure of. Notice that I added resize as well as scroll since it matters if the window changes size.

EDIT: Modified version using similar technique to the original to find the upper bound:

http://jsfiddle.net/FDv2J/4/

$(function() {
  $.fn.scrollBottom = function() {
    return $(document).height() - this.scrollTop() - this.height();
  };

  var $el = $('#sidebar>div');
  var $window = $(window);
  var top = $el.parent().position().top;

  $window.bind("scroll resize", function() {
    var gap = $window.height() - $el.height() - 10;
    var visibleFoot = 172 - $window.scrollBottom();
    var scrollTop = $window.scrollTop()

    if (scrollTop < top + 10) {
      $el.css({
        top: (top - scrollTop) + "px",
        bottom: "auto"
      });
    } else if (visibleFoot > gap) {
      $el.css({
        top: "auto",
        bottom: visibleFoot + "px"
      });
    } else {
      $el.css({
        top: 0,
        bottom: "auto"
      });
    }
  }).scroll();
});

body{
  margin: 0;
}
#sidebar>div {
  width: 100px;
  height: 300px;
  margin-top: 10px;
  background-color: blue;
  position: fixed;
}
#stuff {
  height: 1000px;
  width: 300px;
  background-image: url("http://placekitten.com/100/100")
}
#footer,
#header {
  height: 172px;
  width: 300px;
  background-color: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id="header"></div>

<div id="sidebar">
  <div class="fixed">sidebar</div>
</div>

<div id="stuff">

</div>

<div id="footer">

</div>