Блог

Главная - Вопросы по программированию - Почему мой переход не работает при переключении класса?

Почему мой переход не работает при переключении класса?

#javascript #bootstrap-4

#javascript #bootstrap-4

Вопрос:

Я пытаюсь переключить положение, зафиксированное в этой навигационной системе начальной загрузки, при прокрутке вниз. Я хочу, чтобы переход был плавным. Но эффект перехода вообще не работает. Что я делаю не так?

 <nav class="navbar navbar-expand-lg navbar-light bg-light" id="navbar">
    <div class="container">
        <a class="navbar-brand">LOGO</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
          aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav ml-auto">
            <li class="nav-item">
              <a class="nav-link" href="">Contact</a>
            </li>
          </ul>
        </div>
    </div>
</nav>
  
 window.addEventListener('scroll', function() {
    var header = document.getElementById("navbar");
    header.classList.toggle("fixednav", window.scrollY > 100);
});
  
 .fixednav {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 9999;
    transition: top 0.5s linear;
}

Комментарии:

1. Это не должно быть причиной такого поведения, но у вас есть дополнительный </ul> в вашем коде, который должен быть </div> . Я отправил правку на него.

Ответ №1:

Вы пробовали устанавливать начальное значение, чтобы свойство transition знало начальное значение, к которому нужно перейти?

 top: 0;

Вы также могли бы попробовать добавить свойство transition к самому элементу вместо класса toggle.