Вариант на CSS (position: sticky):
Для фиксации блока таким способом достаточно просто добавить нужному элементу свойство position: sticky
Такой элемент будет рассматриваться как относительно позиционированный до тех пор, пока родительский контейнер не пересечет указанный порог, в котором он прокручивается, после чего он обрабатывается как фиксированный до тех пор, пока не встретит противоположный край содержащего его блока. Другими словами этот элемент остается ограниченным родительским контейнером, в котором он находится.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<header> ... </header> <section class="sticky"> "Залипающий" блок </section> <section> ... </section> <footer> ... </footer> |
|
1 2 3 4 |
.sticky { position: sticky; top: 0; } |
Вариант на jQuery (position: fixed):
Данный вариант на JS c библиотекой jQuery немного сложнее, но более гибкий. Например, можно изменить фон у "залипшего" блока
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<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> |
|
1 2 3 4 5 6 7 8 9 |
.sticky-content.fixed { position: fixed; top: 0; left: 0; right: 0; } .sticky-content.fixed section { background: green; } |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
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')); |
Пришлось еще изменить z-index зафиксированного блока, а то если из него открывать модальное окно, то не отключается кликабельность прокручиваемых блоков и у модального окна появляется прозрачность.
z-index: 1
Класс! Воспользовался! Работает! Спасибо!))
это устанавливается в браузер или на сайт
Возможно прикрутить к блоку кнопку закрыть?
Закрыть фиксированный блок?
Можно конечно, если на CSS, то например, через checkbox, а на JS через клик скрыть блок.
Спасибо, на css офигенно просто)