Плавующий блок во время скролла с учетом разной высоты блока

Всем привет,

Есть блок, который начинает плавать с определенной точки и должен зафиксироваться в определенной точки снизу, с учетом, что этот блок, может быть разной высоты. Я попробовал следующим образом:

HTML

 <div class="content">
  <div class="container">
    <div class="row">
      <div class="col-md-3">
        <div class="list-float"></div>
      </div>
      <div class="col-md-6">
        <div class="stable-block"></div>
      </div>
    </div>
  </div>
</div>

CSS

.content {
  height: 3000px;
}
.stable-block {
  height: 1000px;
  background: #ccc;
  border: 1px solid #fff;
}
.list-float {
  height: 100px;
  background: red;
  width: 100px;
}

JS

$.fn.followTo = function(pos) {
  var $this = this,
  $window = $(window);
  var point = $('.stable-block').offset().top;
  var pointBottom = point + $('.stable-block').outerHeight();
  $window.scroll(function(e) {
    var elementTop = $this.offset().top;
    var elementBottom = elementTop + $this.outerHeight();
    if ($window.scrollTop() > pos && elementBottom < pointBottom) {
      $this.css({
        position: 'fixed',
        top: 0,
        bottom: 100
      });
    } else if (elementBottom > pointBottom) {
      $this.css({
        position: 'absolute',
        top: 'inherit',
        bottom: 0
      });
    } else {
      $this.css({
        position: 'relative',
        top: 0,
        bottom: 100
      });
    }
  });
};
$('.list-float').followTo(0);

jsfiddle

Не могу понять, почему не работает, где моя ошибка? Спасибо.