Фиксированный блок с изменяющимся отступом сверху

Дата публикации: 04.02.2012

Достаточно часто встречается ситуация, когда какой-либо, по задумке дизайнера, очень важный блок (например, корзина товаров, меню или просто информационная панелька) должен, независимо от прокрутки экрана, все время находится на виду.

Сама по себе задача трудностей не представляет. В конце концов именно для этих целей служит position: fixed.

Немного сложнее обстоит дело, если нужно организовать у такого блока переменный отступ. Пусть, например, фиксированный блок располагается внизу шапки (т.е. с каким-либо отступом сверху), но после прокрутки экрана «приклеивается» к его верху. Логика тут железная — шапка уехала вверх и отступ теперь совершенно не нужен.

На помощь приходит Javascript.

Задача

Реализовать фиксированный блок с плавающим верхним отступом.

Решение

Для примера располагаю блок в шапке:

<div class="header">
	<div id="fixedBox">
		Какой-то очень важный блок, который все время нужно видеть.
	</div>
</div>

В CSS задаем оформление и позиционирование:

.header {
	height: 200px; /* высота шапки */
}
#fixedBox {
	/* размеры фиксированного блока */
	height: 30px;
	width: 900px;
	position: fixed;
	/* отступ сверху когда шапка видна полностью */
	margin-top: 170px;
}

Скрипт для пересчета отступа на основе jQuery (естественно, не забудь подключить и саму библиотеку):

<script type="text/javascript">
jQuery(document).ready(function(){
	/* функция кроссбраузерного определения отступа от верха документа к текущей позиции скроллера прокрутки */
	function getScrollTop() {
			   var scrOfY = 0;
			   if( typeof( window.pageYOffset ) == "number" ) {
					   //Netscape compliant
					   scrOfY = window.pageYOffset;
			   } else if( document.body
			   && ( document.body.scrollLeft
			   || document.body.scrollTop ) ) {
					   //DOM compliant
					   scrOfY = document.body.scrollTop;
			   } else if( document.documentElement
			   && ( document.documentElement.scrollLeft
				|| document.documentElement.scrollTop ) ) {
					   //IE6 Strict
					   scrOfY = document.documentElement.scrollTop;
			   }
			   return scrOfY;
	}
	/* пересчитываем отступ при прокрутке экрана */
	jQuery(window).scroll(function() {
		fixPaneRefresh();
	});
	
	function fixPaneRefresh(){
		if (jQuery("#fixedBox").length) {
			var top  = getScrollTop();
			if (top

Демо пример.

Проверено в: