make div stick to the top of the screen and stop before hitting the footer

Question

I\'m trying to make a div stick to the header once the user has started scrolling down the page . I found the example How can I make a div stick to the top of the screen on

Answer 1

$(window).load($(function()
{
    var elem = $("#scroller");
    var top = elem.offset().top;
    var maxTop = $("#footer").offset().top - elem.height();
    var scrollHandler = function()
    {
      var scrollTop = $(window).scrollTop();
      if (scrollTop<top) {
        elem.css({position:"relative",top:""})//should be "static" I think
      } else if (scrollTop>maxTop) {
        elem.css({position:"absolute",top:(maxTop+"px")})
      } else {
        elem.css({position:"fixed",top:"0px"})
      }
    }
    $(window).scroll(scrollHandler);scrollHandler()

}));

fiddle: http://fiddle.jshell.net/3ATzd/2/show/ Only think is it doesn't like the margin-top on #scroller. I also removed the need for the scroller-anchor element, so you can remove this.