Question

我的页面上有这个引导程序导航：

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

我希望它可能会有所帮助。

享受：）

如何在两个引导程序导航栏类之间添加转换

1 个答案: