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

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

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

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

Задача

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

Решение

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

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

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

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

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

	<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 < 170) jQuery("#fixedBox").css("margin-top",170-top+"px"); /* 170 - это наш отступ */
	            else jQuery("#fixedBox").css("margin-top","0");
	        }
	    }
	 
	});
	</script>

Проверено в:
IE 7-9
Firefox 9
Opera 11
Safari
Chrome

Добавлено: 16 Августа 2013 11:58:21 Добавил: Андрей Ковальчук Нравится 0

Добавить