Как создать скользящий блок (остающийся постоянно на экране при прокрутке страницы) при помощи jQuery


Иногда на странице нужен блок с важной информацией, который бы был виден постоянно, то есть при перемещении по странице он не изменял бы своего положения. Такой блок или боковую панель легко создать, используя возможности JQuery. С помощью скрипта JQuery, такой блок всегда будет оставаться там, где вы хотите его видеть.

Как это выглядит

смотреть демо

Как это работает

Разметка HTML

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

<div id=”sticky”>
</div >

<div id=”container”>
</div>

Как видите все достаточно просто. Контейнер stickyсодержит контент для стикера, а контейнер containerсодержит информацию самой страницы

Разметка CSS

Теперь, когда у нас есть основа в HTML, мы можем применить некоторые стили к тегам, чтобы страница выглядела так, как нам нужно.

Сначала назначим правила для стикера

/* оформляем сам стикер */ 
#sticky {
margin-top: 50px;
margin-left: 50px;
padding:15px;
background: rgba(255,255,255,1);
height: 80px;
width: 200px;
border:1px solid #ddd;
font-size:12px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
float:left
}
/* заголовок стикера*/
#sticky h5{
font-size:18px;
font-weight: bold;
}
/* текст в самом стикере */
#sticky p{
text-align: left;
padding: 5px;
}

Теперь назначим правила для контейнера с содержимым страницы

#container {
margin: 20px auto ;
padding: 0;
text-align:justify;
font-size:16px;
font-family:Verdana, Geneva, sans-serif;

}

Код jQuery

Отлично, теперь мы можем перейти к созданию кода jQuery, который сделает всю остальную работу. Прежде чем мы начнем, позвольте мне уточнить, как именно это работает. У нас есть обычный элемент, просто расположенный на странице. Затем, когда страница начинает прокручиваться до того момента, когда элемент соприкасается с верхней частью окна, мы "фиксируем" этот элемент. В действительности при определённых условиях мы применяем либо одни правила для элемента либо другие. Эту работу и выполняет код jQuery.

Во-первых, мы объявим некоторые переменные.

var obj = $('#sticky');
var offset = obj.offset();
var topOffset = offset.top;
var leftOffset = offset.left;
var marginTop = obj.css("marginTop");
var marginLeft = obj.css("marginLeft");

Эти переменные нам нужны для того, чтобы иметь возможность правильно позиционировать элемент, когда он на границе окна.

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

$(window).scroll(function() {
var scrollTop = $(window).scrollTop();

	if (scrollTop >= topOffset){

		obj.css({
			marginTop: 0,
			marginLeft: leftOffset,
			position: 'fixed',
		});
	}

	if (scrollTop < topOffset){

		obj.css({
			marginTop: marginTop,
			marginLeft: marginLeft,
			position: 'relative',
		});
	}
});

Как видите, синтаксис довольно прост. Кроме того, посмотрите на переменную "scrollTop". Эта переменная будет обновляться каждый раз, когда страница прокручивается. Она содержит значение, которое определяет насколько пользователь прокрутил страницу. Далее мы определяем две функции сравнения, которые в зависимости от значения переменной "scrollTop" назначают соответствующие правила CSS.

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

 

 

Реклама
Поделиться
Качественные премиум темы и шаблоны для Вашего сайта:

Смотреть полный каталог качественных тем и шаблонов

Здесь Вы можете выбрать из более чем 46 000 готовых дизайнов. Шаблоны сайтов + установка + хостинг + персонализация + поисковая оптимизация + копирайтинг — все эти услуги вы всегда можете получить от профессионалов мирового уровня!

4 комментария

  1. Petrik20/08/2015
  2. Oltika16/06/2015
  3. Алексей03/02/2014
  4. Михаил15/11/2012

Добавить коментарий

11 + восемь =