Фиксированное меню

Часто люди спрашивают - как сделать, чтобы при прокрутке какой либо из блоков фиксировался (приклеивался к верхней кромке окна) когда скролл доходит до этого самого блока.
Проще говоря - сделать как меню у меня на сайте :)

---

В принципе тут нет ничего сложного, нам понадобится только подключенная библиотека jQuery.
Для наглядности предлагаю рассмотреть реализацию на моем сайте.

Отдельно хочу заметить, что данная реализация подойдет только для тех шаблонов, где это меню/блок в принципе может быть отделен от шаблона.

Итак, имеем следующий контейнер, который мы хотим перемещать. У него обязательно должен быть задан свой уникальный ID.

<div id="main-menu-area">
  ....
</div>

В файле стилей нам надо прописать простенький стиль:

.scrollable{position:fixed;top:0;z-index:9999;}

С его помощью будет фиксироваться блок в верхней части сайта.

И в заключении прописать JS код:

var scroll_menu = 0;
function slide_content(){
	if($(window).scrollTop() > scroll_menu) $("#main-menu-area").addClass('scrollable');
	else $("#main-menu-area").removeClass('scrollable');
}
$(function(){
	scroll_menu = $("#main-menu-area").offset().top;
	$("#main-menu-area").css({width:$("#main-menu-area").width()+'px'}).wrap("<div style='height:"+$("#main-menu-area").outerHeight()+"px'></div>");
	slide_content();
	$(window).scroll(slide_content);
});

Повторно обращу внимание на ID. У меня он main-menu-area у вас он будет другой, поэтому надо будет везде в коде заменить его на свой.

С уважением,
Олег Александрович a.k.a. Sander