Информация к новости
  • Просмотров: 615
  • Автор: sulicompany
  • Дата: 20-12-2012, 20:26
 (голосов: 0)
20-12-2012, 20:26

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

Категория: Программирование » jQuery


1. CSS

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

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

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

Данный код добавляем в раздел <head>
3. javascript

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

Данный код, также, добавляем в раздел <head>, но после кода подключения jQuery.
4. HTML

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