Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #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');
    }
  })
Ответить с цитированием
  #2 (permalink)  
Старый 18.10.2017, 14:14
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,436

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

Смотрите метод «contains» у classList.
https://developer.mozilla.org/ru/doc...t#Методы
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
при скроллинге блок исчезает avanesov89 Общие вопросы Javascript 0 19.03.2016 13:26
Jquery Скрыть/Показать блок при наведении tot_kotoryi Ваши сайты и скрипты 1 08.02.2016 23:15
Ховер и появляющий блок Shuryga Элементы интерфейса 3 28.09.2015 15:39
Копирование блоков в блок maximus Events/DOM/Window 1 14.09.2013 19:40
как скрыть блок div по ключевому слову Sacred13 Элементы интерфейса 6 06.08.2013 19:13