[英]jQuery : CSS smooth transition on scroll
I want create a navbar that can change the background-color
when scroll on spesific scrollTop
. 我想创建一个导航栏,可以在特定
scrollTop
上滚动时更改background-color
。 It's working perfectly, but I want add a transition between change both color. 它工作得很好,但我希望在两种颜色之间添加一个过渡。 It's mean when I scroll more and more to bottom the navbar background-color getting blue.
这意味着当我越来越多地向下滚动导航栏背景颜色变为蓝色时。 Here's my fiddle https://jsfiddle.net/7efc61qs/ .
这是我的小提琴https://jsfiddle.net/7efc61qs/ 。
Thanks in advance 提前致谢
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"> abc </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>
when scrolltop reaches 500px then opacity of div.red is 1 - 500/500 = 0 当scrolltop达到500px时,div.red的不透明度为1 - 500/500 = 0
You might want to check out Scrollie 您可能想查看Scrollie
Funsella made a great example over at CodePen for you to play with: https://codepen.io/Funsella/pen/yLfAG 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);
}
});
}); });
Link to Scrollie on GitHub 链接到GitHub上的Scrollie
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.