我想在另一边做淡化:fadeIn
从下往上,而不是像现在一样,fadeOut
向下到
var $elem = $('.test.fade');
for (var i = 0; i <= 5; i++) {
$elem.clone().appendTo('body');
}
$(window).scroll(function() {
$('.fade').each(function() {
var bounds = this.getBoundingClientRect(),
op = Math.max((bounds.height + Math.min(bounds.top, 0)) / bounds.height, 0);
$(this).css('opacity', op);
});
});
&#13;
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.test {
height: 70vh;
width: 30%;
background-color: rgba(0, 0, 0, 0.6);
margin: 1em auto;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test fade"></div>
&#13;
感谢您的帮助。
答案 0 :(得分:3)
将不透明度计算更改为:
op = Math.max((bounds.height - Math.max(bounds.top, 0)) / bounds.height, 0);
因此它依赖于盒子的底部边框。