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

只需添加它，然后就可以了：

＆＃13;

$(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");
    }
  });
});

＆＃13;

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

＆＃13;

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

＆＃13;

如何添加转换到导航栏？

1 个答案: