CSS HTML Wordpress Верстка

Как зафиксировать блок в боковой колонке с помощью JavaScript

Часто появляется необходимость зафиксировать определенный блок на сайте так, чтобы он был виден даже при прокрутке страницы. Это может быть любая навигация и меню, корзина в интернет-магазине, кнопки наверх или оформить заказ, рубрикатор и даже… реклама. При правильном подходе фиксированный блок поможет увеличить показатели сайта — юзабилити, глубину просмотра, конверсию, рекламный доход — все зависит от целей. В одной из статей Владимир Вовк поделился реальными цифрами из практики, когда зафиксированный рекламный блок в боковой колонке увеличил доход с контекстной рекламы в 4 раза. А я сегодня покажу как же с помощью небольшого скрипта на чистом JavaScript сделать такой блок у себя на сайте.

пример зафиксированного блока

Шаг 1. Код блока, который нужно зафиксировать

Для начала нужно немного подкорректировать код блока, который собираемся фиксировать. Я буду показывать на примере рекламного блока в сайдбаре.

Код рекламы обычно вставляется в стандартный текстовый виджет (в консоли WordPress меню Внешний Вид → Виджеты). Находим свой виджет с рекламой (или добавляем новый, если нужно) и вокруг кода рекламы добавляем тег div вот так:

<div id="fixblock">
<!-- тут должен быть ваш код рекламы -->
</div>

А вот так это выглядит у меня с рекламный блоком AdSense:

Чтобы дальше в скрипте идентифицировать блок, мы установили ему атрибут id со значением fixblock.

Будьте внимательны!
Значение атрибута id будет использоваться в скрипте. Если вы сменили значение на свое, исправьте его и в скрипте.

Шаг 2. Добавляем скрипт

Теперь нужно добавить код скрипта, который будет фиксировать блок на странице при прокрутке. Для этого копируем код ниже (помним про значение id) и добавляем его перед закрывающим тегом в файл footer.php через меню Внешний вид → Редактировать. Функционал написан на чистом JavaScript, поэтому подключение фреймворка jQuery не требуется.

<script type="text/javascript">
function getTopOffset(e) { 
	var y = 0;
	do { y += e.offsetTop; } while (e = e.offsetParent);
	return y;
}
var block = document.getElementById('fixblock'); /* fixblock - значение атрибута id блока */
if ( null != block ) {
	var topPos = getTopOffset( block );
	window.onscroll = function() {
		var newcss = (topPos < window.pageYOffset) ? 
			'top:20px; position: fixed;' : 'position:static;';
		block.setAttribute( 'style', newcss );
	}
}
</script>

Сохраняем и проверяем как все работает.

Тонкости

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

<script type="text/javascript">
jQuery(document).ready(function($) {

а последнюю на вот это:

});
</script>

Источник

Об авторе

Виталий Мельничук

Адаптивная верстка HTML5+CSS3. Разработка шаблонов под CMS Wordpress, DLE. Делаю работу качественно и в срок.

facebook