В связи с внезапно навалившейся на меня «верстальной» работой, приходится раз за разом вспоминать старые приемы и находить решение новых проблем. Так вот, как быть, если нужно прикрепить меню или какой-либо блок к верху экрана, и чтобы при прокрутке контента вниз — этот блок не прокручивался вместе с ним?
В целом очень полезная штука в сфере электронной коммерции, для лендингов в частности. Соорудить такое меню тоже весьма просто. Сделаем мы закрепленное меню с помощью 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» будет закреплено к верху и останется перед глазами посетителя при прокрутке контента.
Спасибо !!!
дримвьювер на этой строке ошибку показывает
if ($(this).scrollTop() > 136) {
попробуйте в дримвьювере поставить значок «>» вручную с клавиатуры. Возможно это просто лаги с кодировкой.
Всё хорошо, но вот чего не хватает каждой статье так это кнопки «демо»
демо тут: sutanaryan.com/wpcp/Tutorials/fixed-menu-when-scrolling-page-with-CSS-and-jQuery/
Спасибо огромное! Все получилось с первого раза!
Здорово, рад помочь!