[JQuery] Делаем плавающий блок в сайдбаре

Возврат к списку

ПлавающийБлок.png

Краткий пост-заметка. В этой статье мы разберем задачу, как можно сделать плавающий блок в сайдбаре. На примере этого блога, блок с баннером плавно прокручивается с контентом. Такой эффект создает следующий Javascript:

$(document).ready(function(){
	var $scrollingBanner = $(".banner");
	var $footer = $("#footer");
	var $BannerOffsetTop = 0;
	$(window).scroll(function(){
		if($(window).scrollTop() < ($footer.offset().top - 500)){
		$BannerOffsetTop = $scrollingBanner.offset().top - parseInt($scrollingBanner.css('marginTop'),10) + 18;
			if($(window).scrollTop() > $BannerOffsetTop - 100) {
				$scrollingBanner.stop().animate({"marginTop": ($(window).scrollTop() - $BannerOffsetTop + 100) + "px"}, 0);
			}else{
				$scrollingBanner.stop().animate({"marginTop": 18 + "px"},0);
			}
		}
	});
});

Где .banner - класс баннера и #footer - id нижнего блока сайта - футера.



Возврат к списку