Question

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

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

.navbar { 过渡：750ms缓解；背景：透明的！重要；} .navbar滚动{背景：＃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>

Answer 1

我相信问题是默认情况下添加了 navbar-scrolled 。我假设该类仅用于滚动屏幕时。

只需从HTML中删除该类。

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

Answer 3

    BigDecimal dollar = BigDecimal.ONE;
    BigDecimal quarter = new BigDecimal("0.25");
    BigDecimal dime = new BigDecimal("0.10");
    
    BigDecimal change = new BigDecimal("3.60");
    BigDecimal numberOfDollars = change.divide(dollar, 0, RoundingMode.DOWN);
    System.out.println(numberOfDollars);

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

滚动时更改颜色导航栏引导

3 个答案: