jquery - 如何在两个 Bootstrap 导航栏类之间添加过渡

Question

我的页面上有这个 Bootstrap 导航:

<nav class="navbar navbar-inverse">
            <div class="container-fluid">
            ...
            ...

我还有这段 jQuery 代码，可以在固定导航栏和经典导航栏之间切换。

            $(document).on("scroll",function(){
                if($(document).scrollTop()>20) {
                    $("nav").addClass("navbar-fixed-top");
                } else {
                    $("nav").removeClass("navbar-fixed-top");
                }
            });

虽然它切换得很好，但变化相当突然，我想给它添加过渡。我尝试将其添加到 css 但它不起作用。我如何在它们之间转换？

nav{
transition: all 1s;
-moz-transition: all 1s; /* Firefox 4 */
-webkit-transition: all 1s; /* Safari and Chrome */
-o-transition: all 1s; /* Opera */
}

Answer 1

我在 CODEPEN 创建了一个示例代码

HTML:

  <nav id="mainNav" class="navbar navbar-default">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Start Bootstrap</a>
    </div>

    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li>
          <a href="#">About</a>
        </li>
        <li>
          <a href="#">Services</a>
        </li>
        <li>
          <a href="#">Portfolio</a>
        </li>
        <li>
          <a href="#">Contact</a>
        </li>
      </ul>
    </div>

  </div>

</nav>

<!-- Demo Header -->
<header>
  <h1>Bootstrap Collapsing Animated Navigation</h1>
</header>

JS:

$(document).on("scroll", function() {
   if ($(document).scrollTop() > 0) {
     $("nav").addClass("navbar-fixed-top");
   } else {
     $("nav").removeClass("navbar-fixed-top");
   }
 });

CSS:

.navbar-default {
  -webkit-transition: all .35s;
  -moz-transition: all .35s;
  transition: all .35s;
  padding: 15px 0;
  margin-bottom: 0;
}

.navbar-fixed-top {
  border: 1px solid transparent;
  padding: 5px 0;
}

header {
  padding: 300px;
  text-align: center;
  background-image: url(https://unsplash.it/800?image=974
);
  background-position: center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  -o-background-size: cover;
}

header h1 {
  color: white;
  font-size: 2em;
}

希望对您有所帮助。

享受 :)