javascript - jQuery : CSS smooth transition on scroll

Question

我想创建一个导航栏，它可以在特定的 scrollTop 上滚动时更改 background-color。它工作完美，但我想在更改两种颜色之间添加一个过渡。这意味着当我越来越多地滚动到底部时，导航栏背景颜色变蓝。这是我的 fiddle https://jsfiddle.net/7efc61qs/ .

提前致谢

Answer 1

var div = $('.red');
var limit = 500;
$(window).scroll(function(){
   var st = $(this).scrollTop();
   div.css({ 'opacity' : (1 - st/500) });
})

.red {
  background:red;
  position:fixed;
  width:100%;
  height:20px;
}

.blue {
  position:fixed;
  background:blue;
  height:20px;
  width:100%;
}
.content {
  height:20px;
  position:fixed;
  width:100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="blue">
</div>
<div class="red">
</div>
<div class="content">
 a b c
</div>



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

当 scrolltop 达到 500px 时，div.red 的不透明度为 1 - 500/500 = 0