滚动时更改颜色导航栏引导程序答案

【问题标题】：Changing color navbar bootstrap when Scroll滚动时更改颜色导航栏引导程序
【发布时间】：2019-01-23 22:58:39
【问题描述】：

您好，我对 jQuery 有疑问。我发现本教程可以在向下滚动时更改引导导航栏的颜色，但它不起作用 https://www.youtube.com/watch?v=AM-GT_0Uu5w

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

.navbar{ 过渡：750ms缓和；背景：透明 !important;} .navbar-scrolled {背景：#1492E6 !important;}

<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>

【问题讨论】：

标签： javascript html css navbar

【解决方案1】：

我认为问题在于默认添加 navbar-scrolled。我假设该类仅适用于滚动屏幕时。

只需从 HTML 中删除该类。

【讨论】：

【解决方案2】：

我就是这样做的（在滚动上添加类）。但我通常保持相同的颜色，但在添加类时折叠/降低导航的高度。

$(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>

【讨论】：

我试了你的写法还是不行，而且大括号继续给我编译js相关的错误

【解决方案3】：

 window.onscroll = function () { scrollFunction() };

    function scrollFunction() {
        if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
            document.getElementsByClassName("navbar").style.background = "#f0f0f0";
        } else {
            document.getElementsByClassName("navbar").style.background = "#000000";
        }
    }

例如：您可以使用此方法更改标题的颜色。 为自己定制。

【讨论】：