Плавающий блок с помощью jQuery

В одно время сталкивался с такой задачей, но до постинга так и не доходило дело, а сегодня старый добрый товарищь натолкнулся на данную вещицу=) Так что пришло время постить. В общем как это делается:

CSS

.left {
	width: 70%;
	float: left;
	height: 1500px;
}
.right {
	margin-top: 10px;
	float: right;
	width: 20%;
}
#fixed {
	background: #CCC;
	padding: 20px;
}

Подключение jQuery

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>

JavaScript

Добавляем в <head> тег

<script type="text/javascript">
	$(function() {
		var offset = $("#fixed").offset();
		var topPadding = 15;
		$(window).scroll(function() {
			if ($(window).scrollTop() > offset.top) {
				$("#fixed").stop().animate({marginTop: $(window).scrollTop() - offset.top + topPadding});
			}
			else {$("#fixed").stop().animate({marginTop: 0});};});
	});
</script>

HTML

<div class="left">
	<!-- Содержание -->
</div>
<div class="right">
	<div id="fixed">Текст фиксированного блока.</div>
</div>

Комментарии (1)

  • Спасибо за инфу. Все просто и понятно.
    Вообще, JQuery хорошая штука. Можно не заморачиваться по поводу кроссбраузерности. Все уже продумано разработчиками. Так что, всем советую, пользуйтесь.

Добавить комментарий