我想创建一个导航栏,它可以在特定的 scrollTop
上滚动时更改 background-color
。它工作完美,但我想在更改两种颜色之间添加一个过渡。这意味着当我越来越多地滚动到底部时,导航栏背景颜色变蓝。这是我的 fiddle https://jsfiddle.net/7efc61qs/ .
提前致谢
最佳答案
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
关于javascript - jQuery : CSS smooth transition on scroll,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39095974/