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

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

• Купить Adobe PhotoShop CS6 в ITShop
• Купить программу Autodesk 3ds Max Design
• Задать вопрос ONLine по покупке программ в интернет магазине ITShop
• Акция Adobe для предприятий малого бизнеса Москвы
• Специальная акция от Corel скидка 25% при покупке лицензий CorelDRAW