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

Очень часто на сайтах с большим количеством контента посетитель теряется на странице и чтобы найти навигационное меню приходится листать на самый верх страницы. Технологии не стоят на месте, экраны мониторов и их разрешения становятся больше, потому сейчас на сайте уже не жалко выделить сверху 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 вы можете заменить на любое другое. Это ваш отступ меню от верхнего края.

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

Эксель нужные формулы

Удаляем символы слева =ПРАВСИМВ(A1;ДЛСТР(A1)-5) Оставляем символы справа =ЛЕВСИМВ(A1;4)

Подробнее

Если на сайте заблокирована правая кнопка мыши как включить

Включить правую клавишу мыши, на сайтах которые ее блокируют (первый способ) Самый простой способ: если вы попадаете на сайт, где блокируют нажатие правой клавиши мыши, а вам это нужно — в адресную строку вставляем следующий код: javascript:void(document.oncontextmenu=null); и нажимаем Enter. После данных действий правая клавиша снова станет активна Включить правую клавишу мыши с помощью расширения […]

Подробнее

Анализ сайта онлайн

Рестайлинг сайта

Если Ваш сайт устарел и не устраивает Вас - мы поможем освежить или полностью переработать его.

Поиск по сайту

Звоните:

8-903-835-04-47

Поиск по сайту