Всплывающая фиксированная навигация
Я хотел бы показать вам навигационную панель, которая появляется при прокрутке содержания страницы в низ, и остается на своем месте.
Буду использовать для реализации jQuery, чтобы была совместимость в том числе IE.
Подобная навигация являются достаточно популярным элементом веб дизайна. Их достаточно часто можно встретить на многих web сайтах.
Я буду использовать элемент HTML5 nav в качестве контейнера для горизонтально списка ссылок.
Шаг 1.
Контейнер для навигации
С HTML5 знакомы думаю уже все. В данном примере я использую два из них:: и. начну со следующей разметки:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="styles.css" />
<!-- Скрипты будут располагаться здесь. -->
</head>
<body>
<nav id="hide">”<!— Спрятан. -->
<ul>
<li><a href="#link-1" class="selected">Вступление</a></li>
<li><a href="#link-2">Шаг I</a></li>
<li><a href="#link-3">Шаг II</a></li>
<li><a href="#link-4">Шаг III</a></li>
<li><a href="#top" id="go-top">⇑ Вверх ⇑</a>
</li>
</ul>
</nav>
<div class=wrapper>
<h1>Большой заголовок.</h1>
<section id=" link-1">Текст раздела ...</section>
</div>
</body>
</html>
Шаг 2.
Приводим в достойный вид.
В style.css с id=”hide” устанавливает position: fixed; А все остальное уж исключительно на ваш вкус и цвет.
#hide {
width:100%;
height:40px;
padding: 20px 0;
position: fixed;
top: 0px;
margin:0px;
background-color:#287455;
text-align:center;
opacity:0.9;
filter:alpha(opacity=90);
-moz-opacity:0.9;
}
#hide li a {
text-decoration: none;
font-size: 20px;
color: #000;
font-weight: bold;
display: inline-block;
width: 120px;
text-align: center;
padding: .80px 16px;
}
nav li a:hover,
nav li a.selected {
color: #000;
z-index:5;
background: #40bfe8;
}
Шаг 3.
Код jQuery
Ниже представлен код JavaScript. Он скрывает элемент #hide. Затем проверяет значение позиции верхней полосы прокрутки “scrollTop”, и если оно больше, чем 100, отображает элемент #hide, в противном случае, прячет его. Следующая часть кода — это функция обработки события клика по кнопке “Вверх” — #go-top. Если произведен клик по кнопке, значение scrollTop тега body установится в 0.
<script src="jquery-1.6.4.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$("#hide").hide();
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
$('#hide').fadeIn();
} else {
$('#hide').fadeOut();
}
});
$('#go-top').click(function () {
$('body,html').animate({
scrollTop: 0
}, 800);
return false;
});
});
});
</script>
Автор: Sapun4ik
