X
  • Дизайн та розробка сайту
  • Дизайн і створення сайтів. Розробка тем для WordPress. Створення Landing Page.
  • office@gnatkovsky.com.ua
  • @vgnat
  • Написати мені
Замовити послугу

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

Приклад
  • 2024-03-29
  • 7178 переглядів

  • Дизайн та розробка сайту

Доброго времени суток!

Часто вы могли замечать на сайтах такое меню, которой при прокрутке вниз фиксировалось в верху экрана. Также это может быть какой то блок, поиск и другие элементы.

no image

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

Как пример мы зафиксируем блок 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;

}

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

Якщо Вам була корисна моя праця, можете фінансово підтримати сайт або відключити блокувальник реклами, що займе 2 хвилини :)

Хочу підтримати фінансово Хочу відключити блокувальник

Оцініть статтю
  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
Проголосовало: 14, в среднем: 4.7 из 5
Читайте також