Question

我想创建一个导航栏，可以在特定background-color上滚动时更改scrollTop。它工作得很好，但我希望在改变两种颜色之间添加一个过渡。这意味着当我越来越多地向下滚动导航栏背景颜色变为蓝色时。这是我的小提琴https://jsfiddle.net/7efc61qs/。

提前致谢

Answer 1

＆＃13;

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

＆＃13;

.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%;
}

＆＃13;

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

＆＃13;

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

Answer 2

您可能想查看 Scrollie

Funsella在CodePen上为您提供了一个很好的例子： https://codepen.io/Funsella/pen/yLfAG

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

    }
  });

}）;

在GitHub上链接到Scrollie

jQuery：CSS平滑过渡滚动

2 个答案: