Закрепленный блок (Sticky)
Есть вот такой код, он делает следующее, при прокрутки скролла на 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'); } }) |
moslem, проверяйте в условии присвоен ли необходимый класс элементу или нет, если присвоен, то выполнять это снова нет нужды.
Смотрите метод «contains» у classList. https://developer.mozilla.org/ru/doc...t#Методы |
Часовой пояс GMT +3, время: 00:28. |