Разработка сайта: создание плавающей панели

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

В плавающей панели вы можете разместить какой угодно контент: будь то самые популярные статьи или реклама. Кстати, кликабельность (CTR) рекламных блоков в таком случае заметно улучшается. Да и просто не лишним будет чем-то занять опустевшую при скроллинге область сайдбара.

Для плавающей панели я применяю технологию jQuery, которая часто автоматически подключается в сайтах на WordPress. Ранее я уже писал о том, как заставить панельку плавать на JS, т.е. без использования технологии, которая будет применена сейчас. Чтобы проверить, подключается ли у вас библиотека jQuery, пропишите в шаблоне дизайна, отвечающем за «подвал» страницы (в WP это footer.php) такие строки:

<script>
alert(typeof(jQuery));
</script>

Если при обновлении страницы сайта увидите сообщение «undefined», значит, вам необходимо подключить библиотеку.

Для подключения библиотеки в «шапке» сайта (в WP — файл шаблона header.php) между открывающим и закрывающим тегом «head» вставляем:

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

Теперь ваше сообщение должно быть «function»:

Не забудьте убрать код, отображающий сообщение, чтобы не раздражать посетителей. Да, если вы не увидели вообще никакого сообщения, прекратите читать эту статью, пока не сломали сайт!

Создание плавающей панели

А теперь непосредственно создание плавающей панели. Предположим, что панель наша будет плавать в сайдбаре. Тогда открываем файл шаблона sidebar.php (опять же, это в WP, но если вы понимаете, о чём речь, можете проделать это на любом другом движке). Пишем в нужном месте:

<div class="widget" id="poplavok">
.. ваш контент ..
</div>

"ваш контент" — это то, что вы хотите видеть в поплавке, т.е. произвольный html, javascript и т.п. Например, можно там разместить код Гугл Адсенс, социального опроса, виджет группы Вконтакте и т.д.

Здесь class="widget" я использовал для того, чтобы плавающий блок имел тот же стиль, что и остальные блоки сайдбара, ведь обычно эти блоки имеют класс widget. А вся соль именно в id="poplavok" — уникальный идентификатор «поплавка» (плавающей панели), благодаря которому мы сможем применить именно к этому блоку особые свойства. Сделаем это так. В футер (footer.php) вставляем код:

<script>
if (typeof(jQuery) == 'function') {
$j = jQuery.noConflict();
var $float_block = $j('#poplavok');
var $float_bottom = $j('#footer');
var sdb_float_fixtop = 5;
var float_bottom_limit = $float_bottom.offset().top-20;
setTimeout(function(){ float_bottom_limit = $float_bottom.offset().top-20; }, 2000); // Пересчитаем спустя время
var float_top_init = $float_block.offset().top;
var sdb_float_position = $float_block.position();
var float_block_height = $float_block.height()+sdb_float_fixtop;
var sdb_move_last = false;
var float_lift = 0; // поднимает поплавок, когда он упирается во float_bottom
var float_lift_complete = false;
$j(window).bind('scroll resize', function () {
	// Если свободное место в sdb меньше 100, нет смысла плавать
	if (float_bottom_limit - float_top_init - float_block_height < 100) return;
	var sdb_move = ($j(window).scrollTop() > float_top_init - sdb_float_fixtop);
	if (sdb_move) {
		float_lift = float_bottom_limit - $j(window).scrollTop() - (float_block_height-sdb_float_fixtop);
		if (float_lift < 0) { $float_block.css('top', float_lift); float_lift_complete = true; }
		// когда поднимать не надо, устанавливается начальное значение верхнего отступа
		else if (float_lift_complete) { $float_block.css('top', sdb_float_fixtop); float_lift_complete = false; }
	}
	if (sdb_move_last != sdb_move) {
		sdb_move_last = sdb_move;
		if (sdb_move) {
			$float_block.css({'position':'fixed', 'top':sdb_float_fixtop});
		} else { $float_block.css('position', 'static'); }
	}
});
$j(window).scroll(); // Запустим разок
}
</script>

Что здесь важно:

• В строке 5 скрипт ищет элемент страницы с id="footer". Это для того, чтобы поплавок не залазил на футер (там, где обычно всякие копирайты и т.п.), а толкался им вверх. При отсутствии элемента с id="footer" поведение скрипта не предсказуемо. Идентификатор «footer» для подвала является стандартом в темах WP.
• В строке 6 мы указываем, на каком расстоянии от верхней границы окна плавать поплавку. У меня это расстояние 5 пикселей.
• Да вот ещё, в стилях (style.css) обязательно задайте для #poplavok фиксированную ширину (например, width: 300px). Ведь когда позиционирование элемента меняется со «static» на «fixed», его размеры перестаёт ограничивать родительский блок, и тогда поплавок может занять всю ширину страницы.

Пользуйтесь!