Фиксируем меню при прокрутке страницы

Сейчас я расскажу, как можно сделать фиксированное меню средствами jQuery. Как оказалось, это несложно - код состоит всего из нескольких строчек.

Вариант №1

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

Для начала нужно создать страницу.

При помощи CSS устанавливаем высоту «шапки» и создаем правила для блока с меню.

CSS

	/*шапка*/
	header{
	   height:150px;
	}
	/*фиксированное плавающее меню*/
	#top_nav{
	   top: 150px; /*высота шапки в пикселях*/
	   position: fixed;
	   z-index: 1000;
	}

Теперь переходим к написанию скрипта на jQuery, который будет фиксировать меню вверху страницы при прокрутке.

JavaScript

<script>
var h_hght = 150; // высота шапки
var h_mrg = 0;	  // отступ когда шапка уже не видна
				
$(function(){

	var elem = $('#top_nav');
	var top = $(this).scrollTop();
	
	if(top > h_hght){
		elem.css('top', h_mrg);
	}			
	
	$(window).scroll(function(){
		top = $(this).scrollTop();
		
		if (top+h_mrg < h_hght) {
			elem.css('top', (h_hght-top));
		} else {
			elem.css('top', h_mrg);
		}
	});

});
</script>

В скрипте создаем 2 переменные в которые сохраняем значения высоты шапки и отступа блока с меню сверху. Отступ может отсутствовать (как в данном случае). Затем пишем обработчик на событие onScroll объекта window. В нем с помощью метода scrollTop() вычисляем расстояние от верха страницы до текущей позиции скроллера прокрутки. На основании расчета позиционируем блок с меню.

Вариант №2 (Добавлено 18.02.2015)

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

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

Нам потребуется следующий CSS-код.

CSS

	html, body{height:100%;}
	
	/*шапка*/
	.firstScreen{height:100%; background: fixed url(path/to/image) no-repeat 50% 0;}
	
	/*фиксированное плавающее меню*/
	#top_nav{
	   bottom:0;
	   position: fixed;
	   z-index: 1000;
	   width:100%;
	   height:100px;
	}

Скрипт нижнего фиксированного меню на jQuery будет выглядеть немного иначе.

JavaScript

	 <script>
	   $(function(){
			// высота "шапки", px
			var h_hght = $('.firstScreen').outerHeight();
			// высота блока с меню, px
			var h_nav = $('#top_nav').outerHeight();
			var top;
			$(window).scroll(function(){
				// отступ сверху
				top = $(this).scrollTop();
				if((h_hght-top) <= h_nav){
					$('#top_nav').css('top','0');
				}
				else if(top < h_hght && top > 0){
					$('#top_nav').css({'bottom' : top, 'top':''});
				}
				else if(top < h_nav){
					$('#top_nav').css({'top':'','bottom':'0'});
				}
			});
		});		
	 </script>

В начале создаем 3 переменных. В h_hght сохраняем значение высоты «шапки», которая занимает весь экран по высоте, в переменную h_nav помещаем значение высоты блока с навигацией. В переменной top будет хранится значение отступа прокрутки сверху, которое будет вычисляться при каждом скролле.

Далее в скрипте в зависимости от значения переменной top, блоку с навигацией устанавливается значение CSS-правил top или bottom.

Таким образом достигается поведение блока с меню, описанное выше.

Ну вот, собственно, и всё.

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

• Демо-страничка с верхним фиксированным меню
• Демо-страничка с нижним фиксированным меню