s24344,
выше видимые относительно окна,
ниже относительно контейнера.
class Section {
constructor(element) {
this.element = element;
this.weatherPanel = this.element.querySelector('[data-section-ref="weather-panel"]');
this.groups = this.element.querySelector('[data-section-ref="groups"]');
this.groupsSection = [...this.element.querySelectorAll('[data-section-ref="groups-section"]')];
this.init();
}
init() {
this.groups.addEventListener('scroll', this.move.bind(this));
}
checkDistance(elem){
let posParent = this.groups.getBoundingClientRect();
let posElem = elem.getBoundingClientRect();
if(posElem.top >= posParent.top && posElem.top < posParent.bottom ) elem.classList.add("act");
else elem.classList.remove("act");
}
move(event) {
this.groupsSection.forEach(this.checkDistance.bind(this));
console.log(this.element.querySelector('.act')) //первый видимый
}
}
const section = new Section(document.querySelector('[data-component="section"]'));