Я нахожусь на стадии изучения javascript, и у меня есть проблема.
Я написал код, добавив класс в div и показав его после прокрутки до определенного раздела. Мой код:
window.addEventListener('scroll', function() {
const picture2 = document.querySelector('.box2-pic');
const section2 = document.querySelector('.box2');
const section2Top = section2.getBoundingClientRect().top;
const picture3 = document.querySelector('.box3-pic');
const section3 = document.querySelector('.box3');
const section3Top = section3.getBoundingClientRect().top;
if (window.pageYOffset >= section2Top) {
picture2.classList.add('visible');
}
if (window.pageYOffset >= section3Top) {
picture3.classList.add('visible');
}
});
Однако, что если я хотел бы собрать все такие элементы и добавить их в одну функцию? В каждом разделе есть один div, и я хочу добавить показ анимации после прокрутки.
На данный момент каждый раздел и раздел загружается отдельно.
Я получил все div и разделил их на querySelectoAll , и я делаю что-то вроде этого:
const pictures = document.getElementsByClassName('.allPics');
const sections = document.getElementsByClassName('section');
window.addEventListener('scroll', function() {
for (let i = 0; i < sections.length; i++) {
if (window.pageYOffset >= sections[i].getBoundingClientRect().top) {
pictures[i].classList.add('visible');
}
}})
однако, это не работает. Что я делаю неправильно?
Можно ли написать эту функцию в чистом JavaScript?
Не могли бы вы помочь мне понять, как я должен это исправить? :)