Создаем фиксированное навигационное меню, отображаемое при прокрутке страницы

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

Для начала создадим простенькую структуру странички. Разместим здесь наше меню, заголовок/название сайта и добавим немного контента в виде Lorem ipsum’а для возможности прокрутки.

Код:

<ul id="menu">
	<li><a href="#">HOME</a></li>
	<li><a href="#">FAQ</a></li>
	<li><a href="#">ABOUT</a></li>
	<li><a href="#">CONTACT</a></li>
	<li><a href="#">RSS</a></li>
</ul>

<h2>Заголовок сайта</h2>

<div id="content">

<h3>Прокрути страницу вниз</h3>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<img src="http://placeimg.com/500/500/tech" />

&#8230;

</div>

Создадим несколько CSS-классов для чтобы приукрасить страницу и выделить наше меню.

Код:

body {
	padding:0;
	margin:0;
	font: 14px Helvetica;
}

#content {
	width:500px;
	margin: 0 auto;
}

a {
	color: #5366e1;
	text-decoration: none;
}

a:hover {
	color: #6189e1;
}

#menu {
	padding: 20px 0;
	text-align: center;
	margin: 0;
	width: 100%;
}

#menu ul {
	padding: 0;
	margin:0;
}

#menu li {
	display: inline;
	list-style: none;
	padding: 10px;
}

h2 {
	font-size: 24px;
	color: #333;
	text-align: center;
	margin: 0;
	padding: 25px;
	background: #ccc;
}

.fixed a {
	color: #fff;
	text-decoration: none;
}

.fixed li:hover {
	background: #666;
}

И самое главном добавим класс fixed, который будет добавлять к нашему меню в js-файле при прокрутке страницы вниз и, соответственно, удаляться при обратной прокрутке в самый верх.

Код:

.fixed {
	position: fixed;
	z-index: 10;
	background: #444;
	top: 0;
}

Теперь займемся частью с javascript кодом, в которой мы будем показывать и скрывать наше меню, используя для этого созданный нами класс fixed.

Код:

	$(function () {

	$(window).scroll(function(event) {
		if($(this).scrollTop() > 150) {
			$("#menu").fadeIn();
			$("#menu").addClass(&#8216;fixed&#8217;)
		}

		else {
			$("#menu").removeClass(&#8216;fixed&#8217;)
		}

	});

});

$(this).scrollTop() > 150 – обозначает, что наше меню будет появляться после того, как пользователь прокрутит страницу на более чем 150 пикселей вниз.

С помощью jQuery-функций addClass() мы добавляем необходимый класс к элементу с меню и removeClass(), соответственно, удаляет класс.

Пример можно посмотреть на Codepen, там же можно и поэкспериментировать с кодом.

Создаем фиксированное навигационное меню, отображаемое при прокрутке страницы

О сайте

ArtsLab