Среда Bootstrap предоставляет универсальный и мощный компонент Navbar, который можно настроить в соответствии с потребностями вашего веб-сайта. Одна из популярных настроек — заставить навигационную панель менять свой внешний вид, когда пользователь прокручивает страницу вниз. В этой статье будут рассмотрены несколько методов достижения этого эффекта, а также приведены соответствующие примеры кода.

Метод 1: использование переходов JavaScript и CSS

<!-- HTML -->
<nav class="navbar navbar-expand-lg navbar-light fixed-top" id="navbar">
  <!-- Navbar content -->
</nav>

// JavaScript
window.addEventListener('scroll', function() {
  var navbar = document.getElementById('navbar');
  if (window.pageYOffset > 0) {
    navbar.classList.add('scrolled');
  } else {
    navbar.classList.remove('scrolled');
  }
});

/* CSS */
#navbar {
  transition: background-color 0.3s;
}
#navbar.scrolled {
  background-color: #333;
}

Метод 2: использование jQuery

<!-- HTML -->
<nav class="navbar navbar-expand-lg navbar-light fixed-top" id="navbar">
  <!-- Navbar content -->
</nav>

// JavaScript (with jQuery)
$(window).scroll(function() {
  var navbar = $('#navbar');
  if ($(this).scrollTop() > 0) {
    navbar.addClass('scrolled');
  } else {
    navbar.removeClass('scrolled');
  }
});

/* CSS */
#navbar {
  transition: background-color 0.3s;
}
#navbar.scrolled {
  background-color: #333;
}

Метод 3: компонент ScrollSpy в Bootstrap

<!-- HTML -->
<nav class="navbar navbar-expand-lg navbar-light fixed-top" id="navbar">
  <a class="navbar-brand" href="#">Logo</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
    aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav ml-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#section1">Section 1</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#section2">Section 2</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#section3">Section 3</a>
      </li>
    </ul>
  </div>
</nav>

// JavaScript
$('body').scrollspy({
  target: '#navbar',
  offset: 100
});

/* CSS */
#navbar {
  transition: background-color 0.3s;
}
#navbar .nav-link.active {
  background-color: #333;
  color: #fff;
}

В этой статье мы рассмотрели три метода изменения навигационной панели Bootstrap при прокрутке. Используя переходы JavaScript и CSS, jQuery или компонент ScrollSpy в Bootstrap, вы можете добиться этого эффекта и улучшить внешний вид навигации вашего веб-сайта. Выберите метод, соответствующий требованиям вашего проекта, и начните создавать динамичный и привлекательный пользовательский интерфейс.