Главная > Javascript > плавающий блок в пределах родительского

плавающий блок в пределах родительского

$.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

Categories: Javascript Tags:
  1. Пока что нет комментариев.
Похожие публикации