Как прикрепить меню к верху экрана?

В связи с внезапно навалившейся на меня «верстальной» работой, приходится раз за разом вспоминать старые приемы и находить решение новых проблем. Так вот, как быть, если нужно прикрепить меню или какой-либо блок к верху экрана, и чтобы при прокрутке контента вниз — этот блок не прокручивался вместе с ним?

Вот, собственно, как выглядят такие меню

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

1. Подключаем скрипт.

Скачиваем себе библиотеку jquery-1.10.2.min.js и добавляем ее себе на сервер, например в подпапку /js сайта.

Открываем редактором страницу, в которой будет находиться наша страничка с прикрепленным меню.  В <head> страницы поместите следующий код:

<script src="js/jquery-1.10.2.min.js"></script>

Далее, в <body> страницы вставляем инициализирующий код:

<script src="js/jquery-1.10.2.min.js">

Затем внутри всё того же блока  <body> добавляем следующий код внутри тега script :

jQuery("document").ready(function($){
    
    var nav = $('.nav-container');
    
    $(window).scroll(function () {
        if ($(this).scrollTop() > 136) {
            nav.addClass("f-nav");
        } else {
            nav.removeClass("f-nav");
        }
    });
 
});

2. Настраиваем CSS вид нашего плавающего меню.

Следующий код вставьте в подключенный к страничке css-файл:

.nav-container{ background: rgba(0,0,0,0.7); repeat-x 0 0;}
.f-nav{ z-index: 9999; position: fixed; left: 0; top: 0; width: 100%;} /* а вот это прикрепит меню к верху */
 
.nav { height: 42px;}
 .nav ul { list-style: none; }
 .nav ul li{float: left; margin-top: 6px; padding: 6px; border-right: 1px solid #ACACAC;}
 .nav ul li:first-child{ padding-left: 0;}
 .nav ul li a { }
 .nav ul li a:hover{ text-decoration: underline;}

3. Вносим изменения в HTML файл.

<div class="nav-container">
<div class="nav">
 <ul>
 <li><a href="">Home</a></li>
 <li><a href="">CSS</a></li>
 <li><a href="">PHP</a></li>
 <li><a href="">SEO</a></li>
 <li><a href="">jQuery</a></li>
 <li><a href="">Wordpress</a></li>
 <li><a href="">Services</a></li>
 </ul>
 <div class="clear"></div> /*clear floating div*/
</div>
</div>

Вот и все. Теперь всё, что внутри контейнеров «nav-container» и «nav» будет закреплено к верху и останется перед глазами посетителя при прокрутке контента.

Поделись/сохрани ссылку: