Не могу добавить класс или css свойство через JS

Question

let nav = document.getElementsByClassName('navbar');
  window.addEventListener('scroll', function() {
  console.log(window.pageYOffset);
  if(window.pageYOffset == 0){ 
    nav.style.backgroundColor('#000000');
  }
  if(window.pageYOffset > 0){
    nav.classList.add('blur');
  }
  
});

.blur{
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background-color: #ffffff10;
}

<nav id="showScroll" class="navbar navbar-expand-lg">
            <div class="container-fluid">
              <a class="navbar-brand" href="#1">PlanetaDobra</a>
              <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
              </button>
              <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
                <div class="navbar-nav">
                  <a class="nav-link active" aria-current="page" href="#1">Главная</a>
                  <a class="nav-link" href="#2">О нас</a>
                  <a class="nav-link" href="#3">Причина</a>
                  <a class="nav-link" href="#4">Процесс помощи</a>
                  <a class="nav-link" href="#5">Контент</a>
                  <a class="nav-link" href="#6">Благодарность</a>
                  <a class="nav-link" href="#7">ПОМОЧЬ</a>
                  <a class="nav-link" href="#8">Галерея</a>
                  <a class="nav-link" href="#9">Отзывы</a>
                  <a class="nav-link" href="#10">Связь</a>    
                </div>
              </div>
            </div>
            
          </nav>

Answer 1

Скажу сейчас глупость какую-нибудь, не судите строго, пж
Короче getElementsByClassName возвращает в виде массива и что-бы работало просто постави nav[0].

P.S : Насколько я знаю style.backgroundColor пишется через = а не через скобки, учти это.

let nav = document.getElementsByClassName ('navbar');
window.addEventListener('scroll', function() {
  console.log(window.pageYOffset);
  if (window.pageYOffset == 0) {
    nav[0].style.backgroundColor = '#000000';
  }
  if (window.pageYOffset > 0) {
    nav[0].classList.add('blur');
  }

});

body{
  min-height: 200vh;
}

nav{
  position: sticky;
  top: 0;
}

.blur {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background-color: #ffffff10;
}

<nav id="showScroll" class="navbar navbar-expand-lg">
  <div class="container-fluid">
    <a class="navbar-brand" href="#1">PlanetaDobra</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
              </button>
    <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
      <div class="navbar-nav">
        <a class="nav-link active" aria-current="page" href="#1">Главная</a>
        <a class="nav-link" href="#2">О нас</a>
        <a class="nav-link" href="#3">Причина</a>
        <a class="nav-link" href="#4">Процесс помощи</a>
        <a class="nav-link" href="#5">Контент</a>
        <a class="nav-link" href="#6">Благодарность</a>
        <a class="nav-link" href="#7">ПОМОЧЬ</a>
        <a class="nav-link" href="#8">Галерея</a>
        <a class="nav-link" href="#9">Отзывы</a>
        <a class="nav-link" href="#10">Связь</a>
      </div>
    </div>
  </div>

</nav>

БЛОГ НА HUSL

Не могу добавить класс или css свойство через JS

Ответы (1 шт):