Показать сообщение отдельно
  #4 (permalink)  
Старый 21.12.2018, 19:41
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,121

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"]'));
Ответить с цитированием