Главная / HTML/CSS / Как закрепить меню при прокрутке страницы сайта

Как закрепить меню при прокрутке страницы сайта

12.05.2016

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

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

Приступим. Для начала хочу предупредить что все что мы будем делать, будет работать с помощью jQuery, соответственно в вашем сайте должна быть подключена эта библиотека.

В первую очередь вам нужно добавить идентификатор для вашего меню, в моем примере я добавил идентификатор wrap

<nav class="navbar navbar-default" id="wrap">

1	<nav class="navbar navbar-default" id="wrap">

Как видите, по умолчанию моему меню присвоено всего два класса: navbar и navbar-default. Это стандартные bootstrap классы меню.

Теперь подключите следующий скрипт после строки подключения jQuery библиотеки:

<script type="text/javascript">   
	$(document).ready(function() {
	var start_pos=$('#wrap').offset().top;
	 $(window).scroll(function(){
	  if ($(window).scrollTop()>=start_pos) {
	      if ($('#wrap').hasClass()==false) $('#wrap').addClass('fix-navbar-top');
	  }
	  else $('#wrap').removeClass('fix-navbar-top');
	 });
	});
</script>

$(document).ready(function() {

var start_pos=$('#wrap').offset().top;

$(window).scroll(function(){

if ($(window).scrollTop()>=start_pos) {

if ($('#wrap').hasClass()==false) $('#wrap').addClass('fix-navbar-top');

}

else $('#wrap').removeClass('fix-navbar-top');

});

</script>

После подключения этого скрипта, на странице в которой присутствует меню с идентификатором wrap, при её прокручивании, будет присваиваться класс fix-navbar-top тому элементу у которого есть идентификатор wrap (соответственно наше меню).

Теперь осталось дело за малым, добавить в файл стилей или прописать в hedere стили для класса fix-navbar-top:

.fix-navbar-top{
	position: fixed;
	z-index: 1000;
	width: 1118px;
	top: 0;
	border-bottom: 2px solid orange;
	border-radius: 0;
}

.fix-navbar-top{

position: fixed;

z-index: 1000;

width: 1118px;

top: 0;

border-bottom: 2px solid orange;

border-radius: 0;

}

Единственный минус этого варианта, ширина меню при фиксированном позиционировании блока, должна быть указана статично. Если ваш сайт имеет «резиновую верстку» на малых экранах меню с шириной 1118px будет смотреться не очень красиво. Но и тут я нашел выход, для каждого из размеров экранов я прописал медиазапросы, которые меняли ширину блока в зависимости от ширины экрана устройства на котором просматривается страница. О медиазапросах я напишу немного позже.

Чтобы посмотреть что получилось, нажмите на кнопку и прокрутите страницу

Пример

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

Как закрепить меню при прокрутке страницы сайта

Читайте также:

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

Рубрики блога

Присоединяйся к нам