new test

by locally

HTML

<div class='l'>
  1<br>
  2<br>
  3<br>
  4<br>
  5<br>
  6<br>
  7<br>
  8<br>
  9<br>
  0<br>
  11<br>
  12<br>
  13<br>
  14<br>
  15<br>
  16<br>
  17<br>
    1<br>
  2<br>
  3<br>
  4<br>
  5<br>
  6<br>
  7<br>
  8<br>
  9<br>
  0<br>
  11<br>
  12<br>
  13<br>
  14<br>
  15<br>
  16<br>
  17<br>
</div>
<div class='r'>
  a
  <br> b
  <br> c
  <br> d
  <br> a
  <br> b
  <br> c
  <br> d
  <br> a
  <br> b
  <br> c
  <br> d
  <br> a
  <br> b
  <br> c
  <br> d
  <br> a
  <br> b
  <br> c
  <br> d
  <br> a
  <br> b
  <br> c
  <br> d
  <br> a
  <br> b
  <br> c
  <br> d
  <br> a
  <br> b
  <br> c
  <br> d
  <br> a
  <br> b
  <br> c
  <br> d
  <br> a
  <br> b
  <br> c
  <br> d
  <br> a
  <br> b
  <br> c
  <br> d
  <br> a
  <br> b
  <br> c
  <br> d
  <br> a
  <br> b
  <br> c
  <br> d
  <br> a
  <br> b
  <br> c
  <br> d
  <br> a
  <br> b
  <br> c
  <br> d
  <br> a
  <br> b
  <br> c
  <br> d
  <br> a
  <br> b
  <br> c
  <br> d
  <br> a
  <br> b
  <br> c
  <br> d
  <br> a
  <br> b
  <br> c
  <br> d
  <br> a
  <br> b
  <br> c
  <br> d
  <br> a
  <br> b
  <br> c
  <br> d
  <br> a
  <br> b
  <br> c
  <br> d
  <br> a
  <br> b
  <br> c
  <br> d
  <br> a
  <br> b
  <br> c
  <br> d
  <br>

</div>

CSS

.r {
  float: left;
 
  width: 200px;
  border: 1px red solid;
  background: red;
  margin-left: 100px;
}

.l {
  float: left;
  
  width: 100px;
  border: 1px black solid;
  background: black;
  top: 0;
  color: white;
}

.fixed {
  position: fixed;
}

JavaScript

$(window).scroll(function() {
  var offset = $(".l").height() - $(window).height();
  if ($(window).scrollTop() >= offset) {
    $('.l').addClass('fixed');
    $('.l').css("top", -offset);
  } else {
    $('.l').removeClass('fixed');
  }
});