(495) 925-0049, ITShop интернет-магазин 229-0436, Учебный Центр 925-0049
  Главная страница Карта сайта Контакты
Поиск
Вход
Регистрация
Рассылки сайта
 
 
 
 
 

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

Источник: coolwebmasters
Design FactoRy

Сегодня мы хотим научить вас создавать скользящую боковую панель (сайдбар) при помощи 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(){}.

Ссылки по теме


 Распечатать »
 Правила публикации »
  Написать редактору 
 Рекомендовать » Дата публикации: 11.12.2012 
 

Магазин программного обеспечения   WWW.ITSHOP.RU
WinRAR 5.x Standard Licence - для частных лиц 1 лицензия
VMware Workstation 14 Pro for Linux and Windows, ESD
Купить WinRAR : 5 : Академическая лицензия 1 лицензия
FastReport FMX 2 Single
SAP CRYSTAL Server 2013 WIN INTL 5 CAL License
 
Другие предложения...
 
Курсы обучения   WWW.ITSHOP.RU
 
Другие предложения...
 
Магазин сертификационных экзаменов   WWW.ITSHOP.RU
 
Другие предложения...
 
3D Принтеры | 3D Печать   WWW.ITSHOP.RU
 
Другие предложения...
 
Новости по теме
 
Рассылки Subscribe.ru
Информационные технологии: CASE, RAD, ERP, OLAP
Новости ITShop.ru - ПО, книги, документация, курсы обучения
Программирование на Microsoft Access
СУБД Oracle "с нуля"
OS Linux для начинающих. Новости + статьи + обзоры + ссылки
Новые материалы
Новости мира 3D-ускорителей
 
Статьи по теме
 
Новинки каталога Download
 
Исходники
 
Документация
 
Обсуждения в форумах
Нормальные казино в 2021 году (6)
После долгих поисков все таки смог найти хорошие игровухи, хотя и ушла куча времени, пока я...
 
Отличается ли ДрифтКазино от беттинга? (35)
Друзья, давно заметил, что на Дрифте уже несколько месяцев во всю рекламируется и предлагается...
 
Реклама (6)
Добрый день. Какое продвижение сделать собственному бизнесу?
 
Пишу программы на заказ профессионально (3290)
Пишу программы на заказ на языках Pascal (численные методы, списки, деревья, прерывания) под...
 
Бесплатные прогнозы на спорт (1)
Сейчас много мошеннических прогнозистов, которые занимаются так называемыми раскрутками счетов,...
 
 
 



    
rambler's top100 Rambler's Top100