Блог студии веб-дизайна «Make a Site» Дизайн, верстка, программирование, наполнение и раскрутка сайтов.

Плавающий (прилипающий) блок в сайдбаре на jQuery

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

Плавающий (прилипающий) блок в сайдбаре на jQuery
Содержание статьи

Зачем нужен плавающий блок

Одним из самых распространенных на сегодняшний день шаблонов для верстки сайта является двухколоночный шаблон, в котором большая часть площади отводится под контентную область и небольшая часть под так называемый сайдбар (боковую колонку).

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

Довольно часто размер контента в сайдбаре и контентной области может сильно отличаться по высоте. К примеру, если вы написали довольно большую статью, например, тысяч на 10 символов, а еще добавили в нее всякие графические и интерактивные элементы, то высота окна браузера будет достаточно велика. Проблема в данном случае заключается в том, что высота сайдбара при этом останется неизменной, такой же, какой она была и на главной странице вашего сайта, высота которой, как минимум, в 3 раза меньше, т.к. она не содержит большого количества контента.

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

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

Принцип реализации и нюансы

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

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

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

no-position-fixedМы не используем фиксированную позицию в нашем методе реализации данного вопроса, т.к. выбрали немного другой способ — изменение отступа сверху, не меняя при этом ориентации блока. Иными словами, данный способ не использует CSS свойство position со значением fixed, как это делают многие другие, просто копируя код друг у друга. Просто мы посчитали этот метод нестабильным и придумали свой.

Самая большая проблема в реализации плавающего блока была при использовании низких разрешений, когда высота экрана практически равнялась высоте вертикального баннера, который должен был прилипать и не сдвигать подвал сайта вниз до бесконечности. В случае же, когда используется position: fixed, блок вообще наезжал на футер (подвал сайта), что смотрелось крайне не эстетично. Кстати, такая проблема возникает у многих, кто использует метод, основанный на фиксированном позиционировании блока. Именно поэтому мы и решили сделать функцию, основываясь на внутреннем отступе родительского элемента целевого блока.

jQuery скрипт плавающего блока

Начнем, как всегда с разметки. Она до безобразия примитивна и сказать тут особо нечего:

Здесь произвольное содержание блока

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

Ну а теперь давайте перейдем непосредственно к самой функции, для работы которой необходимо подключить jQuery фреймворк любой версии. Требования минимальны и, скорей всего, он уже у вас подключен, так что дело остается за малым:

$(window).scroll(function() {
	/*----------------------------------
	sticky block script by makeasite.ru
	----------------------------------*/
	var sb_m = 20; /* отступ сверху и снизу */
	var mb = 300; /* высота подвала с запасом */
	var st = $(window).scrollTop();
	var sb = $(".sticky-block");
	var sbi = $(".sticky-block .inner");
	var sb_ot = sb.offset().top;
	var sbi_ot = sbi.offset().top;
	var sb_h = sb.height();

	if(sb_h + $(document).scrollTop() + sb_m + mb < $(document).height()) {
		if(st > sb_ot) {
			var h = Math.round(st - sb_ot) + sb_m;
			sb.css({"paddingTop" : h});
		}
		else {
			sb.css({"paddingTop" : 0});
		}
	}
});

Мы вешаем наш скрипт на событие scroll(). Таким образом, он отрабатывается при каждом малейшем перемещении экрана по вертикали. Горизонтальную прокрутку мы, конечно же, не рассматриваем, т.к. надеемся, что вам удалось избежать ее использования на своем сайте.

sticky-block-position-and-footerОчень важным моментом в данном скрипте является величина отступа снизу (в примере она равна 300). Конечно можно было рассчитывать эту высоту в автоматическом режиме, определив высоту контейнера с классом footer, но все-таки макеты у всех разные и в этой задаче слишком много переменных. Поэтому нельзя написать универсальный код, который рассчитает высоту подвала (каким бы способом он ни был сверстан), при которой блок должен останавливаться.

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


Предыдущая статья:
Как стать программистом

Читайте также:
Вторая волна Минусинска: теперь АГС и для доноров


Блог студии веб-дизайна «Make a Site».
Дизайн, верстка, программирование, наполнение и раскрутка сайтов.

Текущий проект: «Stream Booster» — раскрутка Twitch и YouTube каналов

Студия веб-дизайна «Make a site»