问将平滑导航背景颜色从白色更改为黑色
EN

Stack Overflow用户

提问于 2017-02-11 06:30:00

回答 1查看 508关注 0票数 0

下面的代码运行得很好，我唯一想要实现的就是当你向下或向上滚动时，背景平滑地从黑色变为红色。一种淡入或淡出。

我怎样才能做到这一点呢？

正文：

<body data-spy="scroll" data-target=".navbar" data-offset="100">

风格：

body {
    position: relative;
}
.affix {
    top: 0;
    width: 100%;
    -webkit-transition: top 1s ease-in-out;
    -webkit-transition-delay: 0.5s;
    transition: top 1s ease-in-out;
    transition-delay: 0.5s;
    z-index: 9999 !important;
    background: transparent!important;
}
.navbar {
    margin-bottom: 0px;
    border-radius: 0!important;
}
nav {
    top:100px;
    -webkit-transition: top 1s ease-in-out;
    -webkit-transition-delay: 0.5s;
    transition: top 1s ease-in-out;
    transition-delay: 0.5s;
    z-index: 9999 !important;
}
.affix ~ .container-fluid {
    position: relative;
    top: 100px;
}

HTML：

<nav class="navbar navbar-default" data-spy="affix" data-offset-top="0">
<div class="container-fluid">
<div class="navbar-header">
    <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".js-navbar-collapse">
        <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="#">Name</a>
</div>


<div class="collapse navbar-collapse js-navbar-collapse">
    <ul class="nav navbar-nav">
        <li class="dropdown dropdown-large">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">XXXX<b class="caret"></b></a>

            <ul class="dropdown-menu dropdown-menu-large row">
                <li class="col-sm-2">
                    <ul>
                        <li class="dropdown-header navigatie"><a href="XXXX" title="XXXX">XXXX</a></li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</div>
</nav>

jquery

html

css

腾讯特效SDK 2.5折起

美颜基础/原子能力套餐低至1500元/月，提供丰富的美化能力，支持全平台集成

回答 1

Stack Overflow用户

回答已采纳

发布于 2017-02-11 08:56:09

you can achieve this with jquery plugins...for that you have to download this js files from github...https://github.com/Funsella/jquery-scrollie.....



    <script src="jquery.scrollie.min.js"></script>
    <script src="jquery.scrollie.js"></script>
    <script>

    $( window ).ready(function() {

        var wHeight = $(window).height();

        $('.slide')
          .height(wHeight)
          .scrollie({
            scrollOffset : -50,
            scrollingInView : function(elem) {

              var bgColor = elem.data('background');

              $('body').css('background-color', bgColor);

            }
          });

      });
    </script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="jquery.scrollie.min.js"></script>
<script src="jquery.scrollie.js"></script>
<div class="main-wrapper">

  <div class="slide slide-one" data-background="#3498db">
    <div class="inside">
    <p>I Wanted to create a really simple pen</p>
    </div>
  </div>
  <div class="slide slide-two" data-background="#27ae60">
    <div class="inside">
      <p>A pen that uses some awesome colors <br /><span>awesome <a href="http://flatuicolors.com/" target="_blank">like these</a></span></p>
    </div>
  </div>
  <div class="slide slide-three" data-background="#e74c3c">
    <div class="inside">
      <p>And that made you scroll</p>
    </div>
  </div>
  <div class="slide slide-four" data-background="#e67e22">
    <div class="inside">
      <p>Mission Accomplished</p>
    </div>
  </div>
  <div class="slide slide-five" data-background="#9b59b6">
    <div class="inside">
      <p>Have an awesome day</p>
    </div>
  </div>

  <div class="slide slide-five" data-background="#34495e">
    <div class="inside">
      <p>This was built a long time ago so I made a better version <a href="http://codepen.io/Funsella/pen/3271d716c5c6b67c18af6f4ecf9295af/">better version</a> </p>
    </div>
  </div>

</div>
<style>
* { box-sizing: border-box }

body {
  font-family: 'Coming Soon', cursive;
  transition: background 1s ease;
   background: #3498db;
}

p {
  color: #ecf0f1;
  font-size: 2em;
  text-align: center;

}

span {
  clear: both;
  font-size: .7em;
  color: #bdc3c7;
}

a {
  color: #c0392b;
  text-decoration: none;
}

.slide {

  .inside {
    display: table;
    height: 100%;
    width: 100%;
    padding: 0 3em;

    p {
      display: table-cell;
      width: 100%;
      clear: both;
      vertical-align: middle; 
      text-align: center; 
    }
  }
}
</style>



try this....