Показать сообщение отдельно
  #1 (permalink)  
Старый 18.10.2017, 14:03
Аватар для moslem
Аспирант
Отправить личное сообщение для moslem Посмотреть профиль Найти все сообщения от moslem
 
Регистрация: 22.07.2013
Сообщений: 30

Закрепленный блок (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');
    }
  })
Ответить с цитированием