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

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>