—»     —»   Разработка скользящей боковой панели (сайдбара) при помощи jQuery
  Раздел: Руководства   Нет комментариев  

Разработка скользящей боковой панели (сайдбара) при помощи jQuery



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

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

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


Разработка HTML-код

Давайте начнем с разработки простого HTML-кода для нашей боковой панели. В данном случае, мы будем «фиксировать» div с id sticky.

<div id="sticky"></div>
<div id="text"></div>

Разработка CSS

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

body {
background: #fbfbfb;
}
#container {
width: 744px;
}
#text {
color: #333333;
margin-top: 100px;
width: 500px;
height: 10000px;
float: right;
font-size: 15px;
line-height: 23px;
}

Конечно же, мы также будем оформлять наш фиксированный элемент.

#sticky {
margin-top: 50px;
margin-left: 50px;
padding:5px;
background: rgba(255,255,255,1);
height: 120px;
width: 305px;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;
}

Разработка jQuery

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

Что это означает? Мы задали элементу параметр position:fixed, после чего задали ему поля, которые переместят его в то же место, где он был до фиксирования? Звучит сложно? Не беспокойтесь, сам код довольно простой.

Сначала мы объявляем некоторые переменные.

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();

});

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

Сейчас нам понадобятся 2 выражения «if». Одно из них будет выполняться, если пользователь докрутил окно до фиксированного элемента. А второе выражение поначалу может показаться дополнительным.

Тем не менее, оно очень важно. Представьте, что пользователь прокрутил страницу, и фиксированный элемент «прилип». Затем представьте, что произойдет, если пользователь вновь прокрутит страницу вверх?

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

Представляем вам выражения «if»:

	if (scrollTop >= topOffset){

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

if (scrollTop < topOffset){

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

Эти выражения представляют собой всю начинку кода – они и отвечают за работоспособность. Мы получаем следующий результат:

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',
});
}
});

Итак, мы подошли к концу нашего руководства. Надеемся, оно вам понравилось! Также не забудьте включить в документ библиотеку jQuery, и не забудьте обернуть всё в $(document).ready(function(){}.

Все это доступно в виде jQuery-плагина. Так что, если вы хотите использовать такой эффект в своих будущих проектах, то можете воспользоваться плагином jSticky.
Внимание! У вас нет прав для просмотра скрытого текста.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: jQuery
Опубликовал Design FactoRy   Прочитано (раз): 9486   |   Нет комментариев
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Национальная денежная единица России
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Сентябрь 2017    »
ПнВтСрЧтПтСбВс
 123
45678910
11121314151617
18192021222324
252627282930