Блог

я пытаюсь изменить цвет фона моей панели навигации при прокрутке, но он продолжает выдавать мне эту ошибку: ‘Uncaught TypeError: не удается прочитать свойство ‘add’ of undefined’ так в чем проблема или как я могу это применить? это мой список классов CSS, который я пытаюсь удалить после прокрутки первой страницы:

 .navbar {
background: transparent !important;
z-index: 10;
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
position: fixed;
width: 100%;
}
  

и это список классов CSS, который я пытаюсь добавить после прокрутки на вторую страницу или за ее пределы:

 .navbar-active{
position: fixed;
background-color: rgba(0, 0, 0, .692) !important;
box-shadow: 0 3px 1rem rgba(0, 0, 0, .1);
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}
  

и, наконец, это мой JS-код для замены списков классов:

 const navbar = document.getElementsByClassName('navbar');

window.onscroll = function(){
const top = window.scrollY;
if(top >= 693){
    navbar.classList.add('.navbar-active');
} else {
    navbar.classList.remove('.navbar-active');
 }
}
  

Вы неправильно обращаетесь к панели навигации, вы должны получить к ней доступ либо с помощью:

Первое: const navbar = document.getElementsByClassName('navbar')[0];
Помните, что getElementsByClassName возвращает список элементов с этим именем класса

или

Два: const navbar = document.querySelector('.navbar');

Ваша вторая ошибка здесь: navbar.classList.add('.navbar-active') , не ставьте . в строку вашего параметра.

Просто передайте это так:

navbar.classList.add('navbar-active')

Проблема возникает из-за того, что document.getElementsByClassName('navbar') возвращает объект HTMLCollection classList , а у этого нет никакого не-свойства. Все это должно иметь смысл, когда вы думаете об этом — несколько элементов могут иметь определенный класс, и нет смысла говорить о списке классов целого набора элементов, а не только одного.

Очевидно, что вы хотите добавить или удалить класс только из одного элемента — поэтому, предполагая, что у вас есть только один элемент с class "navbar" , вы можете сделать либо это:

 const navbar = document.getElementsByClassName('navbar')[0];`
  

который получает первый (и, предположительно, единственный) элемент с классом navbar, или

 const navbar = document.querySelector('.navbar');
  

который всегда возвращает первый элемент с заданным селектором. Обе эти альтернативы возвращают отдельный элемент, который имеет classList свойство, которое вы ожидаете.

Другим способом было бы использовать I’D, а не класс — что более логично, если вы знаете, что будете использовать его только один раз. document.getElementById('navbarId') также работает, потому что в документе должен быть только один элемент с заданным идентификатором.

Кроме того, как указывает @MosiaThabo в своем ответе / комментарии, у вас есть посторонняя точка в начале имени класса, которое вы пытаетесь добавить.

В classlist вы пишете только имена классов, поэтому вам не нужно писать точку (.) Итак, ваш код должен быть:

 navbar.classList.add('navbar-active');
  

Но я настоятельно рекомендую использовать ID в качестве селектора вместо класса:

 #navbar { 
background: transparent !important;
z-index: 10;
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
position: fixed;
width: 100%;
}
  

затем в JS вы можете легко выбрать:

 const navbar = document.getElementById('navbar');
  

Это более эффективный способ с точки зрения производительности.