附加更改从白色到黑色的平滑导航背景颜色

以下代码正常工作，我想实现的唯一目标是当您向下滚动或向上滚动背景时，例如从黑色变为红色。一些淡入淡出。附加更改从白色到黑色的平滑导航背景颜色

我该如何做到这一点？

身体：

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

来源

2017-02-11 Bas

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

来源

2017-02-11 08:56:09 Mahesh

对不起不工作，我只是想改变导航元素的背景颜色，上下滚动。 – Bas

附加更改从白色到黑色的平滑导航背景颜色

回答

相关问题