Блок, фиксированный при прокрутке

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

Метод основан на CSS-свойстве position: fixed, JQuery и методе $(window).scroll().

<div class="fixed-box"> нужен для того чтобы не прыгали блоки, которые следуют за ним и он должен быть с фиксированной высотой.

<div class="fixed-box">
	<div class="fixed-div">
		Код меню или баннера...
	</div>
</div>
HTML
$(function(){
	$nav = $('.fixed-div');
	$nav.css('width', $nav.outerWidth());
	$window = $(window);
	$h = $nav.offset().top;
	$window.scroll(function(){
		if ($window.scrollTop() > $h) {
			$nav.addClass('fixed');
		} else {
			$nav.removeClass('fixed');
		}
	});
});
JS
.fixed-box {
	height: 60px;
}
.fixed-div {
	height: 60px;
}
.fixed {
	position: fixed;
	z-index: 9999;
	top: 0;
}
CSS
1

Пример для меню

HTML разметка

<!DOCTYPE HTML>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
</head>
<body>
	<div class="fixed-box">
		<div class="fixed-div">
			Код меню или баннера...
		</div>
	</div>
	<p>...</p>
</body>
</html>
HTML

JS

$(function(){
	$nav = $('.fixed-div');
	$nav.css('width', $nav.outerWidth());
	$window = $(window);
	$h = $nav.offset().top;
	$window.scroll(function(){
		if ($window.scrollTop() > $h){
			$nav.addClass('fixed');
		} else {
			$nav.removeClass('fixed');
		}
	});
});
JS

Стили

.fixed-box {
	height: 40px;
}
.fixed-div {
	height: 20px;
	text-align: center;
	background: #FFA500;
	padding: 10px 0;	
}
.fixed {
	position: fixed;
	z-index: 9999;
	top: 0;
}
CSS

Результат

2

Пример для баннера

HTML разметка

<!DOCTYPE HTML>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
</head>
<body>
	<div class="rows">
		<div class="left-col">
			<p>...</p>
		</div>
		<div class="right-col">
			<p>Правая колонка</p>
			<div class="fixed-box">
				<div class="fixed-div">
					Код меню или баннера...
				</div>
			</div>
		</div>
	</div>
</body>
</html>
HTML

JS

$(function(){
	$nav = $('.fixed-div');
	$nav.css('width', $nav.outerWidth());
	$window = $(window);
	$h = $nav.offset().top;
	$window.scroll(function(){
		if ($window.scrollTop() > $h) {
			$nav.addClass('fixed');
		} else {
			$nav.removeClass('fixed');
		}
	});
});
JS

Стили

.rows {
	overflow: hidden;
}
.left-col {
	width: 60%;
	float: left;
	text-align: justify;
}
.right-col {
	margin-left: 65%;
}
.fixed-box {
	height: 200px;
}
.fixed-div {
	height: 180px;
	text-align: center;
	background: #FFA500;
	padding: 10px 0;	
}
.fixed {
	position: fixed;
	z-index: 9999;
	top: 0;
}
CSS

Результат

3

Bootstrap affix

В Bootstrap реализован плагин affix – http://getbootstrap.com/javascript/#affix

Включить его можно добавив атрибуты к тегу:

<div data-spy="affix" data-offset-top="60" data-offset-bottom="200">
	Код баннера...
</div>
HTML

Или через JS:

<div id="myAffix">
	Код баннера...
</div>

<script>
$(function(){
	$('#myAffix').affix({
		offset: {
			top: 60,
			bottom: 60
		}
	});
});
</script>
HTML
13.01.2017, обновлено 18.09.2019 8320
Предыдущая запись Ссылка в заголовке UI Accordion
Следующая запись Как сделать табы на jQuery

Поделится

Другие публикации

Для модальных окон есть множество плагинов такие, как fancybox, Twitter Bootstrap и т.д. Но бывают случаи когда нет...
Несколько примеров как сделать кнопки прокрутки страницы вверх и вниз. Для скроллинга используется jQuery функция...
В статье представлены все самые встречающеюся мета-теги с примерами и пояснениями их использования.
С помощью расширения dompdf можно легко сформировать PDF файл. По сути, dompdf - это конвертер HTML в PDF который...
Отследить появление блока при скроллинге можно с помощью события onscroll, вычисляя его положение методами jquery...
Селект с множественным выбором (select multiple) весьма не удобен, при выборе часто забываешь нажимать сtrl и все...