/* * 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 * Copyright (c) 2009 Yair Even-Or * vsync.design@gmail.com * * Changes by jelle@gerbrandy.com */ $.fn.stickyfloat = function(options, lockBottom) { var $obj = this; var parentPaddingTop = parseInt($obj.parent().css('padding-top')); var startOffset = $obj.parent().offset().top; var opts = $.extend({ startOffset: startOffset, offsetY: parentPaddingTop, duration: 200, lockBottom:true }, options); $obj.css({ position: 'absolute' }); if(opts.lockBottom){ var bottomPos = $obj.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() > startOffset; // check if the window was scrolled down more than the start offset declared. var objFartherThanTopPos = $obj.offset().top > startOffset; // check if the object is at it's top position (starting point) var objSmallerThanWindow = $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) // console.info('pastStartOffset: ' + pastStartOffset) // console.info('objFartherThanTopPos: ' + objFartherThanTopPos) // console.info('$obj.offset().top: ' + $obj.offset().top) // console.info('startOffset: ' + startOffset) // console.info('bottomPos: ' + bottomPos) if( (pastStartOffset || objFartherThanTopPos)){ var newpos = ($(document).scrollTop() - startOffset + opts.offsetY ); var newpos = ($(document).scrollTop()) // - startOffset + opts.offsetY ); if ( newpos > bottomPos ) newpos = bottomPos; if (newpos < startOffset) { newpos = startOffset } if ( $(document).scrollTop() < startOffset ) // if window scrolled < starting offset, then reset Obj position (opts.offsetY); newpos = startOffset; if (objSmallerThanWindow) { $obj.animate({ top: newpos }, opts.duration ); // console.info('1') } else { //the object is bigger than the window: if we scroll further down, we want to stick to the bottom //if we go up, we want to stick to the top if ($(document).scrollTop() < $obj.offset().top ) { // console.info('2: ' + newpos) $obj.animate({ top: newpos }, opts.duration ); } else if ( $(document).scrollTop() + $(window).height() > $obj.outerHeight() + $obj.offset().top ) { // move the object so its bottom sticks to the bottom // console.info('3') $obj.animate({ top : newpos + $(window).height() - $obj.outerHeight() }, opts.duration ); } } } }); };