滚动dow上的淡入淡出元素

Question

我想在另一边做淡化：fadeIn从下往上，而不是像现在一样，fadeOut向下到

＆＃13;

＆＃13;

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;

＆＃13;

＆＃13;

jsfiddle

感谢您的帮助。

Answer 1

将不透明度计算更改为：

op = Math.max((bounds.height - Math.max(bounds.top, 0)) / bounds.height, 0);

因此它依赖于盒子的底部边框。