716 Андрей Барткевич 14 Сентября 2017



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

Сегодня покажем Вам как же с помощью небольшого скрипта на чистом JavaScript сделать такой блок у себя на сайте.

fixed_block.gif



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

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

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

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

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

kak-zafiksirovat-block.jpg


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

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

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


Теперь нужно добавить код скрипта, который будет фиксировать блок на странице при прокрутке. Для этого копируем код ниже (помним про значение id) и добавляем его перед закрывающим тегом </body> в файл 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>


Вариант с автоматическим определением вычислением высоты зафиксированного блока и подвала (замените id подвала на свой):

  <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 scrollHeight = Math.max( document.documentElement.scrollHeight, document.documentElement.clientHeight),

		    // определяем высоту рекламного блока
		    blockHeight = block.offsetHeight,

		    // вычисляем высоту подвала, footer заменить на значение атрибута id подвала
		    footerHeight = document.getElementById('footer').offsetHeight, 	    

		    // считаем позицию, до которой блок будет зафиксирован 
		    stopPos = scrollHeight - blockHeight - footerHeight; 

		var newcss = (topPos < window.pageYOffset) ? 
			'top:20px; position: fixed;' : 'position:static;';

		if ( window.pageYOffset > stopPos ) 
			newcss = 'position:static;';

		block.setAttribute( 'style', newcss );
	}
}
</script>


Или с точно указанной высотой (подставьте свои значения в пикселах):


<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 scrollHeight = Math.max( document.documentElement.scrollHeight, document.documentElement.clientHeight),

		    // высота рекламного блока
		    blockHeight = 400, 

		    // высота подвала
		    footerHeight =  500, 

		    // считаем позицию, до которой блок будет зафиксирован 
		    stopPos = scrollHeight - blockHeight - footerHeight; 

		var newcss = (topPos < window.pageYOffset) ? 
			'top:20px; position: fixed;' : 'position:static;';

		if ( window.pageYOffset > stopPos ) 
			newcss = 'position:static;';

		block.setAttribute( 'style', newcss );
	}
}
</script>

P/S
Для тех, кто использует WordPress и не хочет возиться с установкой кода, теперь доступен наш плагин Fixed Widget. В опциях есть возможность тонкой настройки фиксации блока, его положения и анимации.

На этом - все. Если возникнут вопросы — пишите в комментариях, вместе разберемся с любой проблемой.

Рейтинг:

Поделится с друзьями:

Вы можете оставить свой комментарий:


98

материалов о web-разработке

1345

читателей нашего блога

15

городов и стран

96

разработанных проектов