Как закрепить панель с объявлением (или с инструментами) вверху страницы

jQuery / 1 комментарий

Как на этом сайте. Как видите, одним закреплением мы не обойдёмся — при прокрутке страницы панелька плавно изменяет прозрачность, также прозрачность меняется при наведении мыши.

HTML

Тут есть два варианта, в первом случае панель — это обычный блок, который может содержать неопределённое количество ссылок.

<div id="jquery_megabar">
	<!-- содержимое панели -->
</div>

Во втором случае (как у меня на блоге) панель — сама одна большая ссылка.

<a href="http://" target="_blank" id="jquery_megabar">
	<!-- содержимое панели -->
</a>

CSS

Для обоих вариантов CSS-стили будут общие.

#jquery_megabar {
	display:block;
	position:fixed; 
	top:0; 
	left:0;
	z-index:1999;
	background:#AD5F3E;
 	color:#fff;
	padding:10px 20px; 
	width:100%;
}

Готово. Панель появилась, правда пока что без прозрачности. Можно закончить и на этом этапе, ну а мы продолжаем!

P.S. Обратите внимание, что панель немного наезжает на верхнюю часть сайта, так она может залезть даже на логотип. Добавим ещё немного стилей:

body {
	padding-top:35px;
}

В этом случае значение отступа неточное и зависит конкретно от вашего сайта, отрегулируете его сами.

jQuery

$(document).ready(function() {
	(function() {
		// настройки
		var fSpeed = 200, fTo = 0.5, fTop = 30;
		// fTop - скорость изменение прозрачности, fTo - максимальная прозрачность, fTop - расстояние сверху
		var untransparent = function() {
			$('#jquery_megabar').stop().fadeTo(fSpeed,1);
		};
		var transparent = function() {
			$('#jquery_megabar').stop().fadeTo(fSpeed,fTo);
		};
		var inside = false;
   		// действия при прокрутке
   		$(window).scroll(function() {
			position = $(window).scrollTop();
			if(position > fTop && !inside) {
				// добавление событий
				transparent();
				$('#jquery_megabar').bind('mouseenter',untransparent);
				$('#jquery_megabar').bind('mouseleave',transparent);
				inside = true;
			} else if (position < fTop) {
				untransparent();
				$('#jquery_megabar').unbind('mouseenter',untransparent);
				$('#jquery_megabar').unbind('mouseleave',transparent);
				inside = false;
			}
		});
	})();
});

Ну как бы всё :)

Миша

Впервые познакомился с WordPress в 2009 году. Организатор и спикер на конференциях WordCamp. Преподаватель в школе Нетология.

Пишите, если нужна помощь с сайтом или разработка с нуля.

Как закрепить панель с объявлением (или с инструментами) вверху страницы

HTML

CSS

jQuery

Миша

Комментарии — 1