Главная » Эффекты для сайта » Фиксированное меню при прокрутке сайта

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

2016-10-10 / Вр:01:52 / просмотров: 20216

Если вы решили зафиксировать меню при прокрутке сайта, то в этой статье вы узнаете, как сделать на сайте фиксированное меню, причем нескольких видов.

Фиксированное меню сверху (HTML + CSS) – при прокрутке страницы, меню всегда на виду и не теряет своей верхней позиции.

[посмотреть демонстрацию]

Фиксированное меню снизу (HTML + CSS) – при прокрутке страницы, меню всегда на виду и не теряет своей нижней позиции

[посмотреть демонстрацию]

Фиксированное меню под шапкой (HTML + CSS + jQuery) – меню размещается под шапкой сайта, но, при прокрутке веб страницы, меню фиксируется вверху окна браузера. Если посетитель начнет крутить мышку назад, то меню вернется на свое прежнее место под шапку сайта.

[посмотреть демонстрацию]

Фиксированное меню внизу экрана (HTML + CSS + jQuery) – шапка сайта занимает весь экран, а меню прилепляется к низу экрана. При прокрутке страницы, меню прилепляется к верхней части экрана.

[посмотреть демонстрацию]

Фиксированное меню сверху (HTML + CSS)

В HTML:

<div class="nav">
<ul>
<li><a href="">Пункт 1</a></li>
<li><a href="#">Пункт 2</a></li>
<li><a href="#">Пункт 3</a></li>
<li><a href="#">Пункт 4</a></li>
<li><a href="#">Пункт 5</a></li>
</ul>
</div>

В CSS:

.nav {
top:0px !important;
position: fixed;
border: 1px solid #000;
width: 99%;
height: 50px;
background-color: #ccc;
marging:0;
}
li {
list-style: none;
float: left;
padding-right:10px;
}

Самый главный параметр для фиксированного меню для сайта – это:

top:0px !important;
position: fixed;

Фиксированное меню снизу (HTML + CSS)

В HTML:

<div class="nav">
<ul>
<li><a href="">Пункт 1</a></li>
<li><a href="#">Пункт 2</a></li>
<li><a href="#">Пункт 3</a></li>
<li><a href="#">Пункт 4</a></li>
<li><a href="#">Пункт 5</a></li>
</ul>
</div>

В CSS:

.nav {
bottom:0px !important;
position: fixed;
border: 1px solid #000;
width: 99%;
height: 50px;
background-color: #ccc;
marging:0;
}
li {
list-style: none;
float: left;
padding-right:10px;
}

Самый главный параметр для фиксированного меню для сайта – это:

bottom:0px !important;
position: fixed;

Фиксированное меню под шапкой (HTML + CSS + jQuery)

К примеру, шапка сайта имеет высоту 150 px. И под шапкой размещено фиксированное меню.

Добавьте в HTML вот такой код:

<header>
<h2>BlogGood.ru</h2>
</header>
<nav id="top_nav">
<ul>
<li class="first"><a href="">Пункт 1</a></li>
<li><a href="">Пункт 2</a></li>
<li><a href="">Пункт 3</a></li>
<li><a href="">Пункт 4</a></li>
<li><a href="">Пункт 5</a></li>
</ul>
</nav>
<div id="content">
куча текста
</div>

В CSS:

body{
font-family:Arial;
color:#000;
}

header{
height:150px;
background:url(/wp-content/themes/bloggood/images/bloggood.png) no-repeat;
position:relative;
}

/*фиксированное плавающее меню*/
#top_nav{
top: 150px; /*высота шапки в пикселях*/
position: fixed;
z-index: 1000;
border-bottom:1px dotted #999;
border-top:1px dotted #999;
width:100%;
background:#f0f0f0;
}

#top_nav ul li{
float:left;
margin-right:40px;
list-style:none;
padding:15px 0;
color:#666;
}

Строка № 7 – это высота шапки, выставленная по умолчанию 150 px. Если высоту шапки нужно сделать больше, тогда не забудьте эту цифру поменять во всех местах кода, где она встречается.
Строка № 14 – высота шапки, которая задается в зависимости от ширины шапки .

Теперь jQuery:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js "></script>

<script>
var h_hght = 150; // высота шапки
var h_mrg = 0; // отступ когда шапка уже не видна

$(function(){

var elem = $('#top_nav');
var top = $(this).scrollTop();

if(top > h_hght){
elem.css('top', h_mrg);
}

$(window).scroll(function(){
top = $(this).scrollTop();

if (top+h_mrg < h_hght) {
elem.css('top', (h_hght-top));
} else {
elem.css('top', h_mrg);
}
});

});
</script>

Строка №2 – высота шапки. Если высота шапки будет больше, нужно это значение заменить.

var h_hght = 150; // высота шапки

Фиксированное меню внизу экрана (HTML + CSS + jQuery)

Шапка сайта занимает весь экран, а меню в это время находится внизу экрана. При прокрутке страницы, меню поднимается до тех пор, пока не достигнет верха, после чего меню фиксируется.

Итак, добавьте этот код в HTML:

<div class="firstScreen">
<nav id="top_nav">
<ul>
<li class="first"><a href="">Пункт 1</a></li>
<li><a href="">Пункт 2</a></li>
<li><a href="">Пункт 3</a></li>
<li><a href="">Пункт 4</a></li>
<li><a href="">Пункт 5</a></li>
</ul>
</nav>
</div>
<!-- дальше контент -->

Теперь в CSS:

*{margin:0; padding:0;}
.firstScreen
{
height:100%;
background:
fixed url(/wp-content/themes/bloggood/images/bloggood.png) no-repeat 50% 0;
background-size: cover;
}

#top_nav{
bottom:0;
position: fixed;
z-index: 1000;
border-bottom:1px dotted #999;
border-top:1px dotted #999;
background: rgba(200,200,200,0.6);
width:100%;
height:100px;
}
#top_nav ul
{
overflow:hidden;
width:990px;
margin: 25px auto 0;
}
#top_nav ul li
{
float:left;
margin-right:40px;
list-style:none;
padding:15px 0;
color:#5f0f0f;
font-size:1.4em;
font-weight: bold;
}

#top_nav a
{
text-decoration:none;
color:#5f0f0f;
font-family:"Trebuchet MS";
font-size:.9em;
border-bottom:1px dashed #666;
}

Теперь jQuery:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js "></script>

<script>
$(function(){
// высота "шапки", px
var h_hght = $('.firstScreen').outerHeight();
// высота блока с меню, px
var h_nav = $('#top_nav').outerHeight();
var top;
$(window).scroll(function(){
// отступ сверху
top = $(this).scrollTop();
if((h_hght-top) <= h_nav){
$('#top_nav').css('top','0');
}
else if(top < h_hght && top>0){
$('#top_nav').css({'bottom' : top, 'top':''});
}
else if(top < h_nav){
$('#top_nav').css({'top':'','bottom':'0'});
}
});
});
</script>

Вот и все.
Ковыряйте кода, меняйте под свои нужды и потребности. Естественно, чтобы делать какие-либо изменения в коде, нужно знать, как минимум, основы HTML и CSS.