Иногда мы встречаем на сайтах фиксированные навигационные панели, что при прокрутки изменяются по дизайну. Что теперь можно самостоятельно выстроить для своего сайта. Теперь вы можете создать страницу, где буден несколько якорных ссылок, это когда при нажатие ключевого слова в панели, вам на страницы плавно переводит к этой тематике.
К настоящему времени вы хорошо знакомы с популярной тенденцией дизайна, которая называется липкая верхнее панель, что идет под многие тематические направление. В этом материале рассмотрим способ создания липкого меню, где будет предоставлена demo страница, чтоб изначально можно было посмотреть стилистику и саму работу навигаций.
При открытие страницы так выглядит панель с навигацией.
Здесь сделали клик и цветность сменилось и перевело на тему по которой сделали клик в ключевой фразе.
Для начало подключаем скрипт для функциональности навигаций.
Код
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Переходим к установке:
HTML
Код
<header class="kapudian-daesaep">
<div class="pregendekan">
<a href="http://zornet.ru/" class="logo"><img src="http://zornet.ru/ABVUN/Abas/degakolas/iconbeast-pro.png" alt="Logo"></a>
<nav>
<ul>
<li><a href="#">Главная</a></li>
<li><a href="#">Скрипты</a></li>
<li><a href="#">Шаблоны</a></li>
<li><a href="#">Дизайн</a></li>
</ul>
</nav>
</div>
</header>
<section>
<div class="pregendekan distinasebka-dvanages">
<h1 class='h1'>Заголовок №1</h1>
<p>Здесь идет описание первое!</p>
<h2 class='h2'>Заголовок №2</h2>
<p>Здесь идет описание второе.</p>
<h2 class='h3'>Заголовок №3</h2>
<p>Здесь идет описание третье.</p>
<h2 class='h4'>Заголовок №1</h2>
<p>Здесь идет описание четвертое.</p>
</div>
</section>
CSS
Код
.pregendekan {
padding: 0 50px;
text-align: justify;
}
.kapudian-daesaep {
overflow: hidden;
background: #0099cc;
position: fixed;
width: 100%;
top: 0;
left: 0;
padding:10px 0;
}
.logo {
float: left;
height: 60px;
width: 60px;
position: relative;
}
nav ul {
float: right;
margin: 22px 0;
}
nav ul li {
font-weight: 100;
padding: 0 10px;
display: table-cell;
}
nav ul li a
{
text-decoration: none;
color: #fff;
}
.kapudian-daesaep.sticky-nav
{
background: rgba(254,172,200,0.8);
}
.sticky-nav img
{
width: 50%;
height: 50%;
top: 25%;
left: 25%;
position:absolute;
}
.sticky-nav nav ul li a
{
color: #000;
font-weight: 700;
}
.green
{
color: red!important;
}
JQUERY
Код
var hei=$( ".kapudian-daesaep" ).innerHeight(),
f1 = $('.pregendekan .h1').offset().top,
f2 = $('.pregendekan .h2').offset().top,
f3 = $('.pregendekan .h3').offset().top,
f4 = $('.pregendekan .h4').offset().top,
myHeader = $( ".kapudian-daesaep" ),
myWindow = $( window );
function makeSticky() {
$('.distinasebka-dvanages').css({'padding-top':hei});
myWindow.scroll( function() {
if ( myWindow.scrollTop() == 0 ) {
myHeader.removeClass( "sticky-nav" );
} else {
myHeader.addClass( "sticky-nav" );
}
} );
}
function remove_highlight()
{
$('nav ul li a').each(function(){
$(this).removeClass('green');
})
}
function jump()
{
$('nav ul li a').click(function(){
event.preventDefault();
var str = $(this).parents().index();
if (str == 0) {
$('body,html').animate({scrollTop:f1 + hei});
}
if (str == 1) {
$('body,html').animate({scrollTop:f2 + hei});
}
if (str == 2) {
$('body,html').animate({scrollTop:f3 + hei});
}
if (str == 3) {
$('body,html').animate({scrollTop:f4 + hei});
};
})
}
$( function() {
jump();
makeSticky();
$(window).scroll(function(){
if ($(window).scrollTop() > f1 - hei) {
remove_highlight();
$('nav ul li:nth-child(1) a').addClass('green');
}
if ($(window).scrollTop() > f2 - hei) {
remove_highlight();
$('nav ul li:nth-child(2) a').addClass('green');
}
if ($(window).scrollTop() > f3 - hei) {
remove_highlight();
$('nav ul li:nth-child(3) a').addClass('green');
}
if ($(window).scrollTop() > f4 - hei) {
remove_highlight();
$('nav ul li:nth-child(4) a').addClass('green');
};
})
} );
Сам вопрос будет стоять о предпочтений пользователя, что изначально определяет влияние фиксированной панели навигации на удобство использования.
Демонстрация
