我想在另一侧进行淡入淡出: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);
});
});
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.test {
height: 70vh;
width: 30%;
background-color: rgba(0, 0, 0, 0.6);
margin: 1em auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test fade"></div>
感谢您的帮助。
最佳答案
将不透明度计算更改为:
op = Math.max((bounds.height - Math.max(bounds.top, 0)) / bounds.height, 0);
所以它依赖于盒子的底部边框。
关于javascript - 向下滚动时淡入淡出元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49127426/