вход

Как создать скользящий блок (остающийся постоянно на экране при прокрутке страницы) при помощи 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 комментария

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

  1. Михаил:

    Добрый день!

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

  2. Спасибо! То что искал. Вроде все понятно буду пробовать!

  3. Oltika:

    Спасибо!

  4. #sticky{
    position:fixed;
    right:0;
    top:20%;
    overflow:hidden;
    z-index:99999999
    }
    ВСЕ! зачем городить jquery

Оставить комментарий

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

Правила комментирования

  1. Кoммeнтapий всегда проходит премодерацию.
  2. В поле "URL блога" можно указывать только ссылку на главную страницу вашего блога. Ссылки на прочие веб-ресурсы (в том числе блоги/сплоги, созданные не для людей) будут удалены.
  3. Запрещается использовать в качестве имени комментатора слоганы/названия сайтов, рекламные фразы, ключевые и т.п. слова. В случае несоблюдения этого условия имя изменяется по усмотрению владельца блога. Просьба указывать нормальное имя или ник.
  4. Весьма вероятно, что короткий и неинформативный кoммeнтapий вида "Спасибо!", "Интересная статья", будет удален. Исключение составляют знакомые автору блога комментаторы.