В последнее время входит в моду использование так называемого "Липкого меню", (mail.ru, Тануки,)

В сети описано немало способов реализации, однако на момент написания статьи простого, красивого и стабильного решения найдено не было.

Поэтому предлагаю следующее решение, использующее JavaSсript и CSS.

Сделаем так, чтобы при прокрутке экрана пользователем на определенное нами расстояние(в пикселях), меню будет цепляться к верхнему краю экраха в позиции fixed.

Приступим!

В JavaScript есть событие, соответствующее скроллу экрана: .... Смысл метода сводится к тому, чтобы при событии "Промотка экрана" специальная функция возвращала значение этой самой промотки, и, в зависимости от этого значения, находила меню по ID, переключала его CSS стиль на fixed и обратно.

В данном примере размер шапки установлен 300 рх, при необходимости вы можете заменить его на свой.

JavaScript: 
<script>
window.onscroll = function(){
	var scrolled = window.pageYOffset || document.documentElement.scrollTop;
	var o=document.getElementById('sticky');
	if (scrolled > 300) o.setAttribute('class','fix');
	else o.setAttribute('class','not_fix');
}
</script>


CSS: 
<style>
.fix{
	position:fixed;
	top: 30px;
	left:140px;
}
.not_fix{
	position: absolute;
	top: 120px;
	left:100px;
}
</style>


HTML: 
<body style="height:2000px"> 
	<div id="sticky">Наше меню</div> 
</body>