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

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

Какова суть фиксированного навигационного меню на сайте? Изначально наше меню находится на привычном ему месте, где-то в шапке, в моем случае на расстоянии 140px от верхнего края. Как только посетитель прокручивает страницу на эти самые 140px внизу, меню фиксируется в самом верху окна и там остается все оставшееся время, пока скролл не будет возвращен вновь в верхнее положение. 

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

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

Наш HTML:


	 
	<div id="header">
	    <div id="navigation">
	        <ul id="menu">
	            <li><a href="">Сумки</a></li>
	            <li><a href="">Обувь</a></li>
	            <li><a href="">Шарфы</a></li>
	            <li><a href="">Одежда</a></li>
	            <li><a href="">Аксессуары</a></li>
	        </ul>
	    </div>
	</div>
	 

Наши стили. У меня меню шириной 1180px, расположено по центру. Шапка высотой 180px, меню с прокруткой в него входит и занимает 40px. Значит расстояние от верха 140px. Запомним это число)


	 
	#header {
	    height: 180px;
	}
	#navigation{
	    background: #EF0505;
	    height: 40px;
	    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.4);
	    font-size: 16px;
	    line-height: 40px;
	    position: relative;
	    top: 140px;
	}
	#navigation.fixed{
	    position: fixed;
	    top: 0;
	    width: 100%;
	    background: rgba(239, 5, 5, 0.95);
	}
	#navigation ul{
	    width: 1180px;
	    padding-left: 0;
	    margin: 0 auto;
	    display: block;
	}
	#menu li{
	    float: left;
	    list-style: none;
	    padding: 0 25px;
	    border-right: 1px solid #D60000;
	}
	#menu a {
	    color: #fff;
	    text-decoration: none;
	    font-family: Verdana;
	}
	#menu>li a:hover{
	    color: #656565;
	    transition: color 0.5s ease;
	}
	 

И вот те несколько строчек кода, которые творят волшебство) Мы задаем условия прокрутки страницы, выше 140px или ниже. В зависимости от этого присваивается класс fixed для нашего навигационного меню. А с этим классом, как указано выше мы делаем меню фиксированным и закрепленным сверху.

    jQuery(function($) {
	        $(window).scroll(function(){
	            if($(this).scrollTop()>140){
	                $('#navigation').addClass('fixed');
	            }
	            else if ($(this).scrollTop()<140){
	                $('#navigation').removeClass('fixed');
	            }
	        });
	    });
	 

Число 140 вы можете заменить на любое другое. Это ваш отступ меню от верхнего края.

Актуальные статьи

Добавление образцов цветов в продукты

Решение Решение, представленное здесь, не будет работать в следующих темах: венчурный и безграничный. После выполнения действий, описанных в этом руководстве, параметры цвета ваших продуктов будут отображаться на страницах продукта как образцы с возможностью нажатия.: Любая опция, которая не является цветом (например, Размер, Название), будет превращена в серые кнопки, как это: Взгляните на это демо-магазин , чтобы увидеть […]

Подробнее

Лечение сайта на Вордпресс от вирусов

Очень много сейчас вирусов и хакеров, которые ломают сайты, наполняют вредоносным кодом. Разберемся как вылечить сайт на ВП. 1. Бекапим базы данных. 2. Бекапим файлы сайта. 3. По желанию можно повесить загушку, что-то наподобие: «извините, обновляемся» Для этого достаточно в корень закинуть файлик index.html в котором будет написано <html><head></head> <body><center><h1>Извините, обновляемся.</h1></center> </body></html> 4. Далее требуется зайти в админку сайта. […]

Подробнее
×
Перезвоним и ответим на все вопросы!