плавающий блок в пределах родительского
$.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; if(bottomPos<0) bottomPos=0; } $(window).scroll(function(){ $obj.stop(); var pastStartOffset=$(document).scrollTop()>opts.startOffset; var objFartherThanTopPos=$obj.offset().top>startOffset; var objBiggerThanWindow=$obj.outerHeight()<$(window).height(); if((pastStartOffset||objFartherThanTopPos)&&objBiggerThanWindow){ var newpos=($(document).scrollTop()-startOffset+opts.offsetY); if(newpos>bottomPos) newpos=bottomPos; if($(document).scrollTop()<opts.startOffset) newpos=parentPaddingTop; $obj.animate({top:newpos},opts.duration); } }); };
Пример использования:
$(document).ready(function(){ setTimeout(function(){ $('#main .left').css('min-height',$('#main').height()); $('#main .inner').stickyfloat({duration:500}); },2000); });
<div id="main"> <div class="left"> <div class="inner">content</div> </div> <div class="right"></div> <div class="clear"></div> </div>
.left,.right{ width:50%; } .left{ position:relative; float:left; } .right{ float:right; } .clear{ clear:both; }
Источник: https://ruseller.com/lessons.php?id=999&rub=32