classList и событие прокрутки - PullRequest
Новая
       12

classList и событие прокрутки

0 голосов
/ 10 июня 2018

У меня есть простой скрипт для добавления классов в мою навигационную панель, на который опирается pageYOffset: 

  var navContainer = document.querySelector('.nav-container');
  var firstTitle = document.querySelector('.first-title')
  document.addEventListener('scroll',function(){
      if(window.pageYOffset < 75){
          navContainer.classList.remove('nav-action','yellow');
      }else if(window.pageYOffset > 75){
          navContainer.classList.add('nav-action')
      }else if(window.pageYOffset<firstTitle.offsetTop){
          navContainer.classList.remove('yellow');
      }
      else if(window.pageYOffset > firstTitle.offsetTop){
          navContainer.classList.add('yellow');
      };  
    });

Моя проблема в том, что последнее условие выполняется, когда window.pageYOffset больше, чем firstTitle.offsetTop.эта строка между скобками в консоли возвращает true, но ничего не происходит, когда я пробую весь этот код.

1 Ответ

0 голосов
/ 10 июня 2018

Если window.pageYOffset === 75, ни одна из этих строк фактически не будет выполнена.Предыдущие условия уже охватывают все случаи.

Я бы предложил обрабатывать nav-action и yellow отдельно: 

var navContainer = document.querySelector('.nav-container');
var firstTitle = document.querySelector('.first-title')
document.addEventListener('scroll', function() {
    if (window.pageYOffset < 75) {
        navContainer.classList.remove('nav-action');
    } else {
        navContainer.classList.add('nav-action')
    }

    if (window.pageYOffset < firstTitle.offsetTop) {
        navContainer.classList.remove('yellow');
    } else {
        navContainer.classList.add('yellow');
    }
});
...