Всплывающая фиксированная навигация



Я хотел бы показать вам навигационную панель, которая появляется при прокрутке содержания страницы в низ, и остается на своем месте.
Буду использовать для реализации 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>


Вот мой исходник
Демо