jquery - 如何向导航栏添加过渡？

Question

我在浏览一些网站时看到了一个带有过渡导航栏的网站。所以我也开始尝试为其添加过渡，但到目前为止没有成功。

我的导航栏:

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <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="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

JQuery 检查是否有滚动并向其添加 CSS:

$(document).ready(function(){
  $(window).scroll(function() {
    if ($(document).scrollTop() > 10) {
        $(".navbar-fixed-top").css({
           'background-color' : 'white',
           'transition' : '2.3'
        });
    } else {
      $(".navbar-fixed-top").css("background-color", "transparent");
    }
  });
});

一些额外的 CSS:

.navbar{
      background:transparent;
      border-color: transparent;
      transition: 2.3;
    }

如果您知道我做错了什么并且知道解决方案，能否请您解释一下我实际上做错了什么？

提前致谢!

Answer 1

问题是您在转换时缺少秒 s(在 CSS 和 JS 中)。

只需添加它，然后它就会起作用:

$(document).ready(function(){
  $(window).scroll(function() {
    if ($(document).scrollTop() > 10) {
        $(".navbar-fixed-top").css({
           'background-color' : 'blue',
           'transition' : '2.3s'
        });
    } else {
      $(".navbar-fixed-top").css("background-color", "transparent");
    }
  });
});

.navbar{
background:transparent;
border-color: transparent;
transition: 2.3s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.3/css/bootstrap.min.css">

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <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="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>