Узнать разрешение вашего экрана и IP адрес   •   Online-инструменты
135 просм
0 комм
Поделиться:

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

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

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

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

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

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

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

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

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

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

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

Реализация:

<script>
	$(document).ready(function($) {

		$element = $(".fixed_block");
		$element.css("width", $element.outerWidth());
		$window = $(window);
		$height_el = $element.offset().top;
	
		$window.scroll(function() {
		
			if($window.scrollTop() > $height_el) {
			
				$element.addClass("fixed");

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

			}
    
		});

	});
</script>

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

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

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

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

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

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

Реализация:

<script>
	$(document).ready(function($) {
	
		$element = $(".fixed_block");
		$element_stop = $(".fixed_block_stop");
		$element.css("width", $element.outerWidth());
		$window = $(window);
		$height_el = $element.offset().top;
		$height_el_stop = $element_stop.offset().top;
	
		$window.scroll(function() {
		
			if($window.scrollTop() > $height_el_stop) {
				
				$element.removeClass("fixed");
			
			} else {

				if($window.scrollTop() > $height_el) {
					
					$element.addClass("fixed");
				
				} else {
					
					$element.removeClass("fixed");
				
				}
				
			}
    
		});
		
	});
</script>

Ну и те же стили из второго варианта:

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

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

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

0
комментарий
Оставить комментарий:
Нажимая кнопку «Отправить» вы даете согласие на обработку своих персональных данных.
Ваше Имя
Ваш E-mail
Текст комментария