Когда свойство top блока, к которому происходит скрол становится меньше чем высота хедера, ему добавляется класс .sticky, которые добавляет этому блоку свойство position: fixed. Когда свойство top sticky блока становится больше высоты хедера, у него убирается класс .sticky и он снова находится в обычном потоке документа.
У меня небольшой опыт работы с JS поэтому завис, перепробовав разные варианты. Буду благодарен за помощь!
Мой код:
stickyFilterList();
function stickyFilterList() {
const filterListWrap = document.querySelector('.filter-wrapper');
const headerHeight = document.querySelector('.header').getBoundingClientRect().height;
window.addEventListener('scroll', handleWindowScorll);
function handleWindowScorll() {
const coords = filterListWrap.getBoundingClientRect();
const filterListWrapTopPos = coords.top;
if (filterListWrapTopPos < headerHeight) {
filterListWrap.classList.add('sticky');
console.log('position: fixed');
} else {
filterListWrap.classList.remove('sticky');
console.log('position: absolute');
}
}
}
.header {
position: fixed;
z-index: 10;
top: 0;
left: 0;
right: 0;
height: 120px;
display: flex;
flex-direction: column;
justify-content: center;
width: 100%;
background: grey;
}
.portfolio-hero {
height: 1053px;
margin-bottom: 124px;
background: yellow;
}
.brands {
position: relative;
margin-bottom: 200px;
min-height: 4000px;
background: orange;
}
.filter-wrapper {
position: absolute;
top: -57px;
z-index: 999;
height: 462px;
width: 120px;
background: pink;
}
.filter-wrapper.sticky {
position: fixed;
top: 120px;
}
footer {
height: 600px;
background: red;
}
<header class="header">
</header>
<section class="portfolio-hero">
</section>
<section class="brands">
<div class="filter-wrapper">
</div>
</section>
<footer></footer>