Есть вот такой код, он делает следующее, при прокрутки скролла на 110px задает класс блоку с изображением который должен быть fixed и после того как мы дойдем до координатов PAGE_WITHOUT_FOOTER, то есть почти до конца страницы, наш класс должен меняться на другой, который закрепит снизу изображения и не допустит того чтоб картинка закрыла огромный футер (600px).
Проблема в следующем, когда я дохожу до нужного мне координата, например PAGE_WITHOUT_FOOTER и присваиваю класс, каждый раз когда я скроллю страницу, она обращается к DOM элементу и постоянно присваивает класс. Можно ли сделать так, чтоб она доходила до определенных координатов и просто один раз присвоила класс и не трогала элемент постоянно.
var PAGE_WITHOUT_FOOTER = (document.body.scrollHeight - 1100);
var el = document.querySelector('.g-person-right');
var parentEl = document.querySelector('.g-person');
window.addEventListener('scroll', function(){
if(window.pageYOffset > parentEl.offsetTop) {
el.classList.add('is-active');
if(window.pageYOffset > PAGE_WITHOUT_FOOTER) {
el.classList.remove('is-active');
el.classList.add('is-bottom');
}
} else {
el.classList.remove('is-active');
}
})
