Scroller example

HTML

<h1>Scroller demo</h1>

<div id="mainbar">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam
non tortor eros, nec rhoncus nulla. In fringilla, dui vel vehicula
luctus, nunc arcu ultricies nisi, eu adipiscing sapien orci nec
justo. Nulla facilisis gravida tempus. Nunc interdum, dolor sed
euismod rutrum, odio turpis rutrum odio, iaculis venenatis nunc sem eu
dui. Nulla venenatis, leo quis porta luctus, ipsum ipsum tempus nunc,
in fermentum arcu odio non ipsum. Vivamus bibendum pulvinar sapien a
cursus. Nullam lobortis nibh eget odio placerat hendrerit. In non leo
turpis, quis posuere augue. Mauris auctor commodo quam, quis vulputate
orci tincidunt et. Nulla tellus lectus, rhoncus ut malesuada eget,
auctor ac ligula. Suspendisse mollis tempus interdum. Proin non velit in
lectus elementum interdum eu eget velit. Class aptent taciti sociosqu
ad litora torquent per conubia nostra, per inceptos himenaeos. Nam
lobortis, est ac elementum tincidunt, lacus dolor lacinia erat, eget
ullamcorper augue justo in lectus. Aliquam eros felis, fringilla sed
cursus sit amet, consectetur nec tellus. Vestibulum ultricies auctor
erat, ac facilisis felis fermentum id.

<p>
Quisque sed rhoncus dolor. Nullam hendrerit justo non lacus rutrum
vitae pellentesque velit adipiscing. Vestibulum ante ipsum primis in
faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus
pulvinar ultricies sapien, sed consectetur purus condimentum et. Nulla
viverra accumsan condimentum. Ut sodales, lacus sed varius porttitor,
odio ipsum tristique odio, ac sollicitudin est urna at sem. Aliquam
suscipit porta felis, sit amet aliquet justo ultricies ac. Proin a orci
et eros interdum dignissim. Cum sociis natoque penatibus et magnis dis
parturient montes, nascetur ridiculus mus. Aenean vehicula malesuada
pretium. Suspendisse potenti. Nullam at felis quam. Donec gravida mi
et purus pretium vitae placerat lacus porttitor. Donec scelerisque
pellentesque sollicitudin. Nullam et lacinia urna. In...

CSS

body {
    width: 960px;
  }
  #mainbar {
    width: 660px;
    float: left;
  }
  #sidebar {
    width: 270px;
    float: right;
  }
  #scroller {
    width: 270px;
  }
  #footer {
    clear: both;
  }

JavaScript

$(function() {
  var a = function() {
    var b = $(window).scrollTop();
    var d = $("#scroller-anchor").offset({scroll:false}).top;
    var c=$("#scroller");
    if (b>d) {
      c.css({position:"fixed",top:"0px"})
    } else {
      if (b<=d) {
        c.css({position:"relative",top:""})
      }
    }
  };
  $(window).scroll(a);a()
});