Фиксация блока при прокрутке

Вариант на CSS (position: sticky):

Для фиксации блока таким способом достаточно просто добавить нужному элементу свойство position: sticky

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

Открыть в новом окне

<header>
	...
</header>
<section class="sticky">
	"Залипающий" блок
</section>
<section>
	...	
</section>
<footer>
	...
</footer>

...

</header>

"Залипающий" блок

</section>

...

</section>

...

</footer>

.sticky {
	position: sticky;
	top: 0;
}

.sticky {

position: sticky;

top: 0;

}

Вариант на jQuery (position: fixed):

Данный вариант на JS c библиотекой jQuery немного сложнее, но более гибкий. Например, можно изменить фон у "залипшего" блока

Открыть в новом окне

<header>
	...
</header>
<div class="sticky-element">
	<div class="sticky-anchor"></div>
    <div class="sticky-content">		
		<section class="sticky">
			"Залипающий" блок
		</section>						
	</div>		
</div>
<section>
	...	
</section>
<footer>
	...
</footer>

...

</header>

"Залипающий" блок

</section>

</div>

...

</section>

...

</footer>

.sticky-content.fixed {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
}
.sticky-content.fixed section {
	background: green;		
}

.sticky-content.fixed {

position: fixed;

top: 0;

left: 0;

right: 0;

}

.sticky-content.fixed section {

background: green;

}

var StickyElement = function(node){
	var doc = $(document), 
	fixed = false,
	anchor = node.find('.sticky-anchor'),
	content = node.find('.sticky-content'); 
	var onScroll = function(e){
		var docTop = doc.scrollTop(),
        anchorTop = anchor.offset().top;
		if(docTop > anchorTop){
			if(!fixed){
				anchor.height(content.outerHeight());
				content.addClass('fixed');        
				fixed = true;
			}
			} else {
			if(fixed){
				anchor.height(0);
				content.removeClass('fixed'); 
				fixed = false;
			}
		}
	};
	$(window).on('scroll', onScroll);
};
var sticky = new StickyElement($('.sticky-element'));

var StickyElement = function(node){

var doc = $(document),

fixed = false,

anchor = node.find('.sticky-anchor'),

content = node.find('.sticky-content');

var onScroll = function(e){

var docTop = doc.scrollTop(),

anchorTop = anchor.offset().top;

if(docTop > anchorTop){

if(!fixed){

anchor.height(content.outerHeight());

content.addClass('fixed');

fixed = true;

}

} else {

if(fixed){

anchor.height(0);

content.removeClass('fixed');

fixed = false;

}

};

$(window).on('scroll', onScroll);

};

var sticky = new StickyElement($('.sticky-element'));

Роман: 13.09.2023 в 15:58

Пришлось еще изменить z-index зафиксированного блока, а то если из него открывать модальное окно, то не отключается кликабельность прокручиваемых блоков и у модального окна появляется прозрачность.

z-index: 1

Ответить
СЕРГЕЙ: 22.03.2023 в 15:37

Класс! Воспользовался! Работает! Спасибо!))

Ответить
Александр: 22.01.2022 в 07:15

это устанавливается в браузер или на сайт

Ответить
Денис: 30.05.2021 в 23:03

Возможно прикрутить к блоку кнопку закрыть?

Ответить
- Alexander: 01.06.2021 в 08:40
  
  Закрыть фиксированный блок?
  Можно конечно, если на CSS, то например, через checkbox, а на JS через клик скрыть блок.
  
  Ответить
insider: 08.04.2021 в 19:30

Спасибо, на css офигенно просто)

Ответить

Вариант на CSS (position: sticky):

Вариант на jQuery (position: fixed):

Смотрите также:

Добавить комментарий:

Комментарии: