Изменение состояние при прокрутке

158

08 января 2020, 14:20

В проекте имеется несколько section'ов. Один из них выглядит следующим образом:

Проблема заключается в следующем. Во время прокрутки данного section'а он должен менять свое состояние(то есть иметь position:fixed, но его min-height: 1470px). А также все пункты должны доходить до воронки и плавно исчезать (не зависимо от их количества). Причем этот блок должен быть полностью адаптивным.

Answer 1

Повозившись еще немного, решил проблему самостоятельно:) Решение представлено чуть ниже:

const scroll = document.querySelector('.list-tools'), 
  content = document.querySelectorAll('.scroll-content div'); 
let itemsCount = content.length - 1; 
 
content.forEach((value, index) => { 
  value.style.position = 'absolute'; 
  value.style.top = 0; 
  value.style.width = '100%'; 
  value.style.height = '100px'; 
  value.style.opacity = 0; 
  value.style.transition = 'all .4s ease-in'; 
  if (index == content.length - 1) { 
    value.style.opacity = 1; 
  } 
}); 
 
scroll.addEventListener('mousewheel', onWheel); 
 
 
function onWheel(e) { 
  let delta = e.deltaY; 
  if (delta > 0) { 
    //при скролле вниз 
    itemsCount--; 
    let copyThisLength = -1; 
    if (itemsCount >= 0) { 
      copyThisLength = itemsCount; 
      content[copyThisLength].style.opacity = 1; 
    } 
    while (copyThisLength < content.length - 1) { 
      content[copyThisLength + 1].style.top = `${parseInt(content[copyThisLength+1].style.top) + delta / 1.5}px`; 
      copyThisLength++; 
    } 
  } else { 
    //при скролле вверх 
    console.log(delta); 
  } 
  e.preventDefault(); 
}

div.list-tools { 
  display: flex; 
  justify-content: center; 
  width: 100%; 
  height: 875px; 
  /*при задании следующей высоты этот блок идеально доходил до воронки. т.е. это крайняя точка*/ 
} 
 
div.list-tools_ul { 
  position: absolute; 
  width: 100%; 
  height: 875px; 
  overflow: hidden; 
}

<section> 
  <div class="list-tools"> 
    <div class="list-tools_ul"> 
      <div class="scroll-content"> 
        <div class="list-tools__item white">Заголовок №1</div> 
        <div class="list-tools__item white">Заголовок №2</div> 
        <div class="list-tools__item white">Заголовок №3</div> 
        <div class="list-tools__item white">Заголовок №4</div> 
        <div class="list-tools__item white">Заголовок №5</div> 
      </div> 
    </div> 
  </div> 
</section>