stickyFloat.js

/*
 * stickyfloat - jQuery plugin for verticaly floating anything in a constrained area
 *
 * Example: jQuery('#menu').stickyfloat({duration: 400});
 * parameters:
 *    duration  - the duration of the animation
 *    startOffset - the amount of scroll offset after it the animations kicks in
 *    offsetY   - the offset from the top when the object is animated
 *    lockBottom  - 'true' by default, set to false if you don't want your floating box to stop at parent's bottom
 * $Version: 05.16.2009 r1
 * $Version: 12.24.2010 r2 - added recalcHeight because the container the stickyfloater lives is in positioned
 * Copyright (c) 2009 Yair Even-Or
 * vsync.design@gmail.com
 *           (c) 2010 Matte Edens
 * matte@ruckuswireless.com
 * https://gist.github.com/gists/757645
 */

$.fn.stickyfloat = function(options, lockBottom) {
  // return unless we have something to make sticky
  if (!this.length)
    return this;
  var $obj             = this;
  var $parent          = $obj.parent();
  var parentPaddingTop = parseInt($parent.css('padding-top'));
  var startOffset      = $parent.offset().top;
  var opts             = $.extend({ startOffset: startOffset, offsetY: parentPaddingTop, duration: 200, lockBottom:true }, options);

  $parent.recalcHeight();
  $obj.css({ position: 'absolute' });

  if(opts.lockBottom){
    var bottomPos = $parent.height() - $obj.height() + parentPaddingTop; //get the maximum scrollTop value
    if( bottomPos < 0 )
      bottomPos = 0;
  }

  $(window).scroll(function () {
    $obj.stop(); // stop all calculations on scroll event

    var pastStartOffset      = $(document).scrollTop() > opts.startOffset; // check if the window was scrolled down more than the start offset declared.
    var objFartherThanTopPos = $obj.offset().top > opts.startOffset;  // check if the object is at it's top position (starting point)
    var objBiggerThanWindow  = $obj.outerHeight() < $(window).height();  // if the window size is smaller than the Obj size, then do not animate.

    // if window scrolled down more than startOffset OR obj position is greater than
    // the top position possible (+ offsetY) AND window size must be bigger than Obj size
    if( (pastStartOffset || objFartherThanTopPos) && objBiggerThanWindow ){
      var newpos = ($(document).scrollTop() - opts.startOffset + opts.offsetY );
      if ( newpos > bottomPos )
        newpos = bottomPos;
      if ( $(document).scrollTop() < opts.startOffset ) // if window scrolled < starting offset, then reset Obj position (opts.offsetY);
        newpos = parentPaddingTop;

      $obj.animate({ top: newpos }, opts.duration );
    }
  });
};

$.fn.recalcHeight = function() {
  this.css({ height: this.parent().height() - this.height()})
};