Меню с фиксированной позицией для сайта

Меню с фиксированной позицией для сайта

От автора: меню на сайте является основным инструментом навигации по его страницам. Но что же делать, если у Вас на странице выводится большое количество материалов, ведь при этом пользователь прокручивает ползунок прокрутки вниз, далеко от Вашего меню, и чтобы вернуться к меню, ему придется обратно перемещать ползунок скроллинга. Поэтому в данном уроке мы с Вами научимся создавать меню с фиксированным положением в окне браузера. Причем изначально меню будет занимать свое обычное положение и только при прокрутке страницы вниз на определенное расстояние, меню будет занимать фиксированное положение, облегчая тем самым навигацию пользователей по Вашему сайту.

План урока

    1. Подготовка к уроку.

    2. Меню последних записей.

    3. Фиксируем правый сайдбар.

автор

Автор: Виктор Гавриленко

Меня зовут Виктор Гавриленко, по образованию я инженер электромеханик. Еще учась в институте, начал увлекаться компьютерными технологиями и программированием, на протяжении двух лет усиленно занимаюсь разработкой интернет сайтов и веб-программированием. Увлекаюсь написанием небольших скриптов на языке PHP, в связке базами данных MySQL, SQLite, неплохо знаю такие движки как WordPress, Drupal, Joomla.

скачать исходникискачать урок

1. Подготовка к уроку

Вначале давайте определимся, что нам необходимо для данного урока. Первым делом нам потребуется тестовый сайт, на котором мы будем реализовывать данное меню. Я предлагаю в качестве такого сайта взять сайт, работающий на системе управления контентом wordpress.

Как Вы видите это обычная стандартная тема, под данный движок, за единственным исключением того, что на главной странице выводится полный текст сообщений и поэтому она имеет значительный размер по высоте — это то что нам и нужно.

Далее, нам потребуется библиотека jQuery, поэтому переходим на официальный сайт данной библиотеки http://jquery.com, затем по ссылку Download jQuery, скачиваем файл с кодом библиотеки и сохраняем в папке js, в корне активной темы движка wordpress. И сразу же подключим данную библиотеку, для этого открываем файл header.php и пишем следующий код, между тегами head:

<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/jquery-1.9.1.js"></script>

Далее создадим пустой файл script.js и также его сохраним в папке js активной темы. Данный файл необходим для кодирования на языке javascript, поэтому сразу же его подключаем:

<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/script.js"></script>

2. Меню последних записей

Для начала давайте сделаем фиксированным меню вывода заголовков последних добавленных записей. Если посмотреть на наш сайт то — вот это меню:

Как Вы наверное уже заметили это обычный блок aside с идентификатором recent-posts-2. Поэтому давайте перейдем в файл script.js и реализуем логику по заданию фиксированной позиции для данного блока:

jQuery(document).ready(function() {
	
	var left_bar = $('#recent-posts-2');
	var height_s = $('#secondary').height();
	var header = $('header').height();
	var height_sc = header + height_s + 45; 
	
	
	$(window).scroll(function () {
		if($(this).scrollTop() > height_sc && !left_bar.hasClass('fixed')) {
			left_bar.hide(function() {
					$(this).addClass('fixed').fadeIn('500');
					});	
		}
		if($(this).scrollTop() <= height_sc && left_bar.hasClass('fixed')) {
			left_bar.hide().removeClass('fixed').fadeIn('500');
		}
	}); 
});

Итак, первым делом начинаем работу с библиотекой jQuery, для этого выбираем элемент document (другими словами вся html страничка), и вызываем обработчик события ready(). Данный обработчик сработает после полной загрузки нашего сайта. То есть когда, сработает данный обработчик, то выполнится функция описанная в нем. В теле данной функции мы и будем вести кодирование, используя библиотеку jQuery.

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

Поэтому я предлагаю фиксировать меню после прохождения скролом расстояния соизмеримым с шапкой сайта и его правым сайдбаром (меню). При этом пользователь опустится достаточно низко, и правая колонка будет скрыта из его обзора.

Затем создаем переменную left_bar, в которую сохраняем выборку (при помощи jQuery), того элемента, который мы хотим зафиксировать, в нашем случае это блок с идентификатором recent-posts-2. Далее находим высоту правой колонки. Данная колонка содержится в блоке с идентификатором secondary. Поэтому выбираем этот блок и вызываем метод height(), который вернет нам высоту выбранного блока в пикселях, данное значение мы сохраняем в переменную height_s. Далее аналогично определяем высоту шапки сайта, то есть выбираем блок с идентификатором header и вызываем метод height(), опять же значение сохраняем в переменную header.

Теперь суммируя две полученные высоты — высоту шапки сайта и высоту правого блока — мы получим значение, на которое необходимо опустить ползунок скролла, что бы блок с меню принял фиксированное положение. Данное значение сохраняем в переменной height_sc (45 — это величина на которую можно немного увеличить расстояние при котором меню будет занимать фиксированное положение)

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

Для того что бы задать блоку фиксированное положение, необходимо создать определенный набор правил css. Поэтому давайте в файл стилей активной темы, style.css, добавим класс fixed , с такими правилами:

.fixed {
	position:fixed;
	top:1px;
}

Далее необходимо проверить на какое расстояние опущен ползунок скролла. Поэтому формируем условие, если расстояние на которое опущен ползунок скролла больше чем значение сохраненное в переменной height_sc, и у выбранного блока нет класса fixed — значит у выбранного блока последних записей (переменная left_bar), вызываем метод hide() — то есть мгновенно скрываем данный блок. И после того как данный блок полностью скрыт, выполнится функция описанная в данном методе. В этой функции мы при помощи ключевого слова this обращаемся к текущему блоку и используя метод addClass(), добавляем ему класс fixed. И сразу же показываем данный блок, используя метод fadeIn, со скоростью 500 миллисекунд.
Получить расстояние на которое был перемещен ползунок скролла, можно вызвав метод scrollTop(). А узнать есть ли у выбранного блока определенный класс, можно вызвав метод hasClass и передав ему параметром, имя искомого класса. Данный метод вернет TRUE если у блока есть искомый класс.

То есть идея заключается в том, что, как только ползунок скролла перемещается на определенное расстояние и у блока с последними записями нет класса fixed – то данному блоку добавляем класс fixed и он занимает фиксированное положение на экране браузера.

Теперь необходимо реализовать логику возврата блока с последними записями к своему исходному положению. Для этого создаем еще одно условие — если расстояние на которое перемещен ползунок скролла меньше величины height_sc и при этом данный блок имеет класс fixed — значит необходимо мгновенно скрыть данный блок, удалить класс fixed и плавно показать на экран, используя метод fadeIn(), со скоростью 500 миллисекунд. Для удаления класса используем метод removeClass(), и передаем ему имя класса для удаления.

Теперь давайте перейдем в браузер и посмотрим, что у нас получилось:

Как Вы видите меню заняло фиксированную позицию, как бы при этом не перемещался ползунок скролла.

3. Фиксируем правый сайдбар

Теперь давайте посмотрим как выполнить аналогичные действия для всего правого сайд бара. Смотрите, что будет если в переменную left_bar, вместо выборки блока последних новостей подставить выборку блока правого сайдбара, то есть блока с идентификатором secondary. То есть если изменить код вот таки образом:

jQuery(document).ready(function() {

	var left_bar = $('#secondary');
	var height_s = $('#secondary').height();
	var header = $('header').height();
	var height_sc = header + height_s + 45; 
	
	
	$(window).scroll(function () {
		if($(this).scrollTop() > height_sc && !left_bar.hasClass('fixed')) {
			left_bar.hide(function() {
					$(this).addClass('fixed').fadeIn('500');
					});	
		}
		if($(this).scrollTop() <= height_sc && left_bar.hasClass('fixed')) {
			left_bar.hide().removeClass('fixed').fadeIn('500');
		}
	}); 
});

Теперь перейдем в браузер и посмотрим, что у нас получилось:

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

jQuery(document).ready(function() {
	
	var left_bar = $('#secondary');
	var height_s = left_bar.height();
	var header = $('header').height();

	var left = $(window).width() - (($(window).width() - $("#page").width())/2) - left_bar.width()-parseInt(left_bar.css('margin-right'));
	
	var height_sc = header + height_s + 45; 
	
	
	$(window).scroll(function () {
		if($(this).scrollTop() > height_sc && !left_bar.hasClass('fixed')) {
			left_bar.hide(function() {
					$(this).addClass('fixed').css({'left':left}).fadeIn('500');
					});	
		}
		if($(this).scrollTop() <= height_sc && left_bar.hasClass('fixed')) {
			left_bar.hide().removeClass('fixed').css({'left':'0'}).fadeIn('500');
		}
	}); 
});

Как Вы видите здесь все аналогично, за одним исключением, что необходимо рассчитать величину левого смещения. Которое необходимо задать блоку сайдбара для правильного позиционирования в соответствии с дизайном.
Для этого необходимо внимательно посмотреть на дизайн тестового сайта, смотрите контент и правый сайдбар, располагаются по центру, то есть по бокам есть пустое пространство. Затем у блока правого сайд бара есть определенный внешний правый отступ, который также необходимо учитывать.

Значит давайте по порядку. Первым делом определим левый отступ, используя метод css, который позволяет получать значения правил css, или задавать правилам определенные значения. Если передать методу только имя правила — значит мы получим значение этого правила, если же указать вместе с именем правила и значение — то данное значение будет установлено правилу, имя которого мы передали. Поэтому вот мы с Вами получаем значение правого внешнего отступа:

parseInt(left_bar.css('margin-right')

Далее определяем ширину правого блока:

left_bar.width()

Далее определяем ширину пустой области с левой стороны сайта :

($(window).width() - $("#page").width())/2

То есть получаем ширину окна браузера, используя метод width(), вызванный у выбранного элемента window (окно браузера). Затем определяем ширину контента с правым сайдбаром. Вычитаем второе значение из первого и делим полученное на 2, так как у нас две пустых области — слева и справа от контента.

Ну и для получения левого смещения — создаем переменную left и от ширины окна браузера вычитаем все полученные величины:

var left = $(window).width() - (($(window).width() - $("#page").width())/2) - left_bar.width()-parseInt(left_bar.css('margin-right'));

Теперь осталось при добавлении к блоку класса fixed, вызывать метод css(), и с помощью него задавать правило left и значение — переменная left, которую мы с Вами рассчитали. А при удалении класса fixed, опять же можно вызывать метод css(), что бы обнулить правило left.

Теперь давайте перейдем в браузер и посмотрим, что у нас получилось:

Как Вы видите отлично отработало — при перемещении ползунка скролла вниз, блок правого сайдбара — занимает фиксированное положение, до тех пор пока не поднять ползунок слайдера, на величину сохраненную в переменной height_sc.

Вот таким образом можно создавать фиксированные блоки на сайте. В зависимости от положения ползунка скролла.

На этом данный урок завершен. Всего Вам доброго и до новых встреч!

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки: ,

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (9)

  1. федор

    здравствуйте не могу разобраться с одним шаблоном у него просто нет такого файла индекс пхп вернее в нем нет head, помогите разобраться с шаблоном. сюда залил этот шаблон zippyshare.com/v/25697491/file.html
    помогите пожалуйста, просто надо знать в какие файлы добовлять коды а дальше я сам

  2. федор

    у меня проблема на первом шаге не могу подключить библиотеку джеквери, в хедер куда только не ставил ее ,после перезагрузки страниуы сайт криво оттображается!

  3. федор

    вот пожалуйста disk.yandex.ru/public/?hash=ZRwe3zGe%2BQjU4IkPy3/BnNLVXhDuLD0QjI164m2qu3g%3D

    помогите понять в какие файлы на этом шабе что кидать ,а дальше я сам

    • Виктор Гавриленко

      Здравствуйте!
      Попробуйте, добавить код в файл component.php. Если не получится то создайте тему на нашем форуме, опишите проблему и прикрепите архив с темой — будем разбираться. Так как в комментариях такие вопросы очень сложно решать.

  4. федор

    спасибо, будем пробывать!

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree