Выводить значения блоков при прокрутке страницы

Question

Подскажите пожалуйста, как сделать скрипт, который будет выводить значение блока div в определенное место id=value при прокрутке страницы

То есть когда прокручиваем страницу скроллом, в поле value показывает принадлежащее значение определенного div'a, если прокрутили до qwe1 - в фалуе будет 100 или когда прокрутили до qwe2 - показывает 200

Answer 1

Надеюсь этот пример поможет.

const blocks = document.querySelectorAll('.block');
const val = document.querySelector(".value");

window.onscroll = () => {
  blocks.forEach(el => {
    if (window.pageYOffset >= el.offsetTop){
      val.innerHTML = "Value: "+el.textContent;
    }
  })
}

.blocks{
  float: right;
  
}
.block{
  background: lightgreen;
  height: 500px;
  margin: 20px 0;
}
.value{
  position: fixed;
  top: 0;
  
}

<main>
  <div class="value">Value:</div>
  <div class="blocks">
    <div class="block">Text 1</div>
    <div class="block">This is second div</div>
    <div class="block">HTML</div>
    <div class="block">JS</div>
  </div>
</main>

БЛОГ НА HUSL

Выводить значения блоков при прокрутке страницы

Ответы (1 шт):