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

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

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;
			}
		});
	})();
});

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

Подпишитесь, чтобы раз в неделю получать свежие статьи с блога по email.

Смотрите также

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

Оставить комментарий / вопрос

phpjsHTMLCSSSQLПросто код
  Для того, чтобы оставить комментарий, пожалуйста, зарегистрируйтесь или авторизуйтесь на сайте.
Получайте новости блога по email или следите за мной в социальных сетях.
  • alex morozov: Ура, спасибо! Все-таки я разобрался ! Сделал:

  • alex morozov: Сделал Класс добаляется даже если поле пустое

  • Vladislav: Лучше бы посоветовали изящное решение имеющейся проблемы.

  • alex morozov: Не очень понял. Я добавляю метабокс через класс, почти как у вас. class Desc_Meta_Box { private $screens = array(...

  • Миша: Метод тыка хорош, но оснвоы нужно знать в любом случае. Рекомендую почитать это.