Изменение цвета бутбрага navbar при прокрутке - PullRequest
0 голосов
/ 24 января 2019

Привет, у меня проблема с jQuery.Я нашел этот урок по изменению цвета начальной загрузки navbar при прокрутке, но он не работает https://www.youtube.com/watch?v=AM-GT_0Uu5w

$(window).scroll(function () {
    $('nav').toggleClass('navbar-scrolled', $(this).scrollTop() > 800);
});

.navbar {переход: 750 мс облегчение;фон: прозрачный! важный;} .navbar-scrolled {фон: # 1492E6! важный;}


<nav class="navbar navbar-expand-md navbar-scrolled fixed-top">

  <a class="navbar-brand" href="#">example</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
   <span class="navbar-toggler-icon">
        <i class="fal fa-bars"></i>
   </span> 

  </button>

Ответы [ 2 ]

0 голосов
/ 24 января 2019

Вот как я это делаю (добавить класс на свиток).Но я обычно сохраняю тот же цвет, но сворачиваю / уменьшаю высоту навигационной панели при добавлении класса.

$(function() {
   $(window).scroll(function() {
      //ADD CLASS
      if ($(".navbar").offset().top > 90) {
         $(".fixed-top").addClass("top-nav-collapse");
      } else {
         $(".fixed-top").removeClass("top-nav-collapse");
      }
   });
});
nav.top-nav-collapse {
   transition: all 300ms ease-in-out;
   background-color: red !important;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">



<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
   <a class="navbar-brand" href="/">
    MY BRAND
   </a>
   <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
   <span class="navbar-toggler-icon"></span>
   </button>
   <div class="collapse navbar-collapse" id="navbarCollapse">
      <ul class="navbar-nav ml-auto">
         <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Drop Down
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
               <a class="dropdown-item" href="#">
               Page 1
               </a>
               <a class="dropdown-item" href="#">
               Page 2
               </a>
               <a class="dropdown-item" href="#">
               Page 3
               </a>
            </div>
         </li>
         <li class="nav-item">
            <a class="nav-link" href="#">About</a>
         </li>
         <li class="nav-item">
            <a class="nav-link sign-in ml-lg-3" href="#">Sign in</a>
         </li>
      </ul>
   </div>
</nav>

<div style="height: 2000px;"><p>Empty div</p></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js" integrity="sha384-pjaaA8dDz/5BgdFUPX6M/9SUZv4d12SUPF0axWc+VRZkx5xU3daN+lYb49+Ax+Tl" crossorigin="anonymous"></script>
    
0 голосов
/ 24 января 2019

Я считаю, что проблема заключается в добавлении прокрутки navbar по умолчанию.Я предполагаю, что этот класс предназначен только для прокручиваемого экрана.

Просто удалите этот класс из своего HTML.

...