Here's a smooth scrolling div within boundaries based on a timeout. var attrs = ...

Here's a smooth scrolling div within boundaries based on a timeout.

  var attrs = {};
  $(document).ready(function(){
    attrs.startY = $("#target").offset().top;

    // pad the bottom by 20 pixels including the 20 pixels from top added in fixed()
    attrs.endY = $('#bottom').offset().top - $("#target").height() - 40;

    var t = null;
    $(window).scroll(function(){
      clearTimeout(t);
      t = setTimeout('fixed()', 500);
    });
  });

  function fixed() {
    var offsetTop = $(window).scrollTop();
    if (offsetTop < attrs.startY) {
      offsetTop = attrs.startY-20; // get rid of 20 pixel padding when at the top
    } else if (offsetTop > attrs.endY) {
      offsetTop = attrs.endY;
    }
    $("#target").animate({top: offsetTop+20}, 500); // add 20 pixel padding from the top
  }