Меню ( блок ) с плавающей фиксацией ( jQuery )

Чтобы его создать, нужно изначально знать, на какой высоте находится блок относительно верха в начальный момент времени. Эту координату можно задать как статически, так и динамически.

Как пример мы зафиксируем блок fixblock, который будет находится на определенном расстоянии от верха. Для осуществления нам понадобится следующий код

	$(function() {
		var fixblock_height = $('#fixblock').height(); // определяем высоты фиксированного блока
		var fixblock_pos = $('#fixblock').position().top; ; // определяем его первоначальное положение
		$(window).scroll(function(){
			if ($(window).scrollTop() > fixblock_pos){ // Если страницу прокрутили дальше, чем находится наш блок
				$('#fixblock').css({'position': 'fixed', 'top':'0px', 'z-index':'10'}); // То мы этот блок фиксируем и отображаем сверху.
				$('#head').css('padding-bottom', fixblock_height+'px'); // А чтобы это было плавно, добавляем отсуп снизу для верхнего блока (как будто этот блок там все еще есть)
			}else{  // Если же позиция скрола меньше (выше), чем наш блок
				$('#fixblock').css({'position': 'static'}); // то возвращаем все назад
				$('#head').css('padding-bottom', '0px'); // И убираем отступ
			}
		})
	});	

его нужно поместить перед закрывающимся

</head>

HTML код будет иметь примерно следующий вид:

	<div id="head"></div>
	
	<div id="fixblock">
		<div class="block-body">
			
Меню или другие блоки
		</div>
	</div>
		
	<div id="list">
		<div class="content">
			контент<br /><br /><br />
			контент<br /><br /><br />
контент<br /><br /><br />
контент<br /><br /><br />
контент<br /><br /><br />
контент<br /><br /><br />
контент<br /><br /><br />
контент<br /><br /><br />
контент<br /><br /><br />
контент<br /><br /><br />
контент<br /><br /><br />
контент<br /><br /><br />
контент<br /><br /><br />
контент<br /><br /><br />
контент<br /><br /><br />
контент<br /><br /><br />
контент<br /><br /><br />
контент<br /><br /><br />
		</div>
	</div>

ну и стили CSS:

#head{
	width:100%;
	clear:both;
	background: #dbdbdc;
	height:70px;
}

#list{
	margin:0px auto;
	width:1000px;
}
.content{
	width:800px;
	float:left;
	height:2000px;
	color: #8b939c;
	font-size:30px;
}
#fixblock{
	width:100%;
	height:50px;
	padding-bottom:18px;
}
#fixblock .block-body{
	width:100%;
	height:45px;
	padding-top: 5px;	
	background: #9d252f;
	text-align:center;
        color: #fff;

}

Если все сделано правильно, то ваш фиксированный блок будет радовать вас и посетителей вашего сайта.