Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Закрепленный блок (Sticky) (https://javascript.ru/forum/events/71003-zakreplennyjj-blok-sticky.html)

moslem 18.10.2017 14:03

Закрепленный блок (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');
    }
  })

Nexus 18.10.2017 14:14

moslem, проверяйте в условии присвоен ли необходимый класс элементу или нет, если присвоен, то выполнять это снова нет нужды.

Смотрите метод «contains» у classList.
https://developer.mozilla.org/ru/doc...t#Методы


Часовой пояс GMT +3, время: 03:36.