Супербыстрый хостинг на SSD от 165р в месяц   •   Реклама
5 294 просм
2 комм
Поделиться:

Три варианта фиксации элемента на сайте на CSS/jQuery

Фиксирование элементов сейчас пользуется большой популярностью. Так, например, «Яндекс» или социальная сеть «ВКонтакте» (на момент написания статьи) фиксируют свое меню и поиск при прокрутке страницы. Вполне хорошее решение, позволяющее ограничить пользователя от лишних действий в получении доступа к нужному функционалу сайта и позволяющее сделать некий акцент на важных элементах.

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

Фиксация элемента на сайте на CSS

Самый простой вариант – это фиксация элемента на чистом CSS. Все, что вам нужно, это добавить следующие стили к элементу:

position: fixed;
top: 0;
left: 0;
right: 0;

Положение в таком случае будет верхнее, по всей ширине экрана. Вариант отлично подходит для элементов, которые изначально находятся в самом верху (меню и поиск).

Если хотите поиграть с положением – измените значение свойств left, top, right и bottom соответственно.

Минусы – не подходит для элементов, находящихся ниже верхней границы сайта.

Здесь на помощь к нам приходит другое значение position – sticky. Оно фиксирует тот или иной элемент только в рамках первого родительского контейнера. Фиксация элемента при этом начнется тогда, когда верхняя граница элемента совпадет с верхней частью окна браузера, и завершится при достижении элементом конца родителя, при этом другие элементы (и даже окружаемый текст) не смещаются, что очень удобно в отдельно взятых случаях. Пример использования:

position: sticky;
top: 10px;

Эти стили вы присваиваете тому элементу, который хотите зафиксировать. Свойство top со значением «10px» говорит здесь о том, что при фиксации элемента необходимо сделать отступ от верхней границы в 10 пикселей.

Фиксация элемента на сайте при прокрутке страницы на jQuery

Этот вариант, в отличие от первого, фиксирует нужный вам элемент только тогда, когда его положение равняется верхней границе вашего экрана при прокрутке страницы.

Реализация:

<script>

	$(document).ready(function() {

		var element = $(".fixed_block");
		var height_el = element.offset().top;
		
		$(".fixed_block_position").css({
			"width": element.outerWidth(),
			"height": element.outerHeight()
		});

		$(window).scroll(function() {
			
			if($(window).scrollTop() > height_el) {
			
				element.addClass("fixed");

			} else {
			
				element.removeClass("fixed");

			}

		});

	});

</script>

«.fixed_block» здесь – это класс элемента, который нужно зафиксировать при прокрутке, а «.fixed_block_position» - класс обертки.

Простой пример:

<div class="fixed_block_position">
	
	<div class="fixed_block">
	
		Ваше содержимое для фиксации. Ссылки, текст, изображение и прочее.
		
	</div>

</div>

И стили:

<style>
	.fixed {
		position: fixed;
		z-index: 99;
		top: 0;
	}
</style>

Их вы вставляете без изменений. Отличный вариант для фиксации рекламных блоков или других элементов находящихся не в первых рядах.

Фиксация элемента на сайте при прокрутке страницы с остановкой в нужном месте на jQuery

Этот вариант является доработкой вышеуказанного способа. Я много видел сайтов, где в сайдбаре (боковой колонке сайта) фиксируются различные рекламные блоки. Все бы ничего, но при прокрутке страницы до самого низа такие блоки перекрывают футер (низ сайта) и зачастую препятствуют получению немаловажной информации или навигации в нем.

Чтобы исправить этот конфуз и удержать блок при достижении указанной области, и существует этот вариант.

Реализация:

<script>

	$(document).ready(function() {

		var element = $(".fixed_block");
		var height_el = element.offset().top;
		var element_stop = $(".fixed_block_stop");
		var height_el_stop = element_stop.offset().top;
		
		$(".fixed_block_position").css({
			"width": element.outerWidth(),
			"height": element.outerHeight()
		});
        
		$(window).scroll(function() {
          
			if($(window).scrollTop() > height_el_stop - element.outerHeight() - 20) {
				
				element.css({
					"top": element.offset().top,
					"left": element.offset().left
				}).removeClass("fixed").addClass("absolute");
			
			} else {

				if($(window).scrollTop() > height_el) {
					
					element.addClass("fixed").removeClass("absolute").attr("style", "");
				
				} else {
					
					element.removeClass("fixed absolute").attr("style", "");
				
				}
				
			}
  
		});

	});
	
</script>

Ну и те же стили из второго варианта с небольшим дополнением:

<style>
	.fixed {
		position: fixed;
		z-index: 99;
		top: 0;
	}

	.absolute {
		position: absolute;
		z-index: 99;
	}
</style>

На что здесь стоить обратить внимание?

«.fixed_block» – это элемент, который мы фиксируем при прокрутке. «.fixed_block_position» - класс обертки, а «.fixed_block_stop» – это элемент (граница), достигнув которую элемент остановит свое движение (фиксацию).

2
комментария
Гостям запрещено участвовать в обсуждениях сайта. Авторизуйтесь, чтобы расширить привилегии гостевого посещения и получить необходимую помощь от сообщества Pandoge.
Пользователь  |  1

большое спасибо

5.08 в 06:36
  • 1
Администратор  |  732

Статья обновлена.

Улучшена фиксация блока с учетом разных его положений + убраны "прыгания" рядом находящихся элементов.

13.04 в 15:44
  • 0
Подняться наверх
«Pandoge» - помощник веб-мастера