javascript - 根据可见程度更改 DIV 不透明度

Question

我正在尝试根据窗口中的可见程度(高度方向)更改 DIV 的不透明度。例如，如果 50% 的 DIV 在窗口中可见，则不透明度应为 .5

这就是我所拥有的，我知道它是业余代码而不是最佳代码。这是我的数学问题。当 DIV 在屏幕上大约占 50% 时，根据我的计算，它大约为 80%

$(window).scroll(function () {
    var block = $('.block')
    var blockHeight = block.outerHeight();
    var bottom_of_block = block.offset().top + blockHeight;
    var blockOpacity = 0;
    if (bottom_of_block < ($(window).height() + $(window).scrollTop())) {
        // Sets opacity to 1 if div is completely on screen
        blockOpacity = 1;
    } else {
        // This is the math that I cant figure out completely
        blockOpacity = ($(window).height() + $(window).scrollTop()) / (bottom_of_block);
    }
block.css('opacity', blockOpacity);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="height: 500px"></div>
<div class="block" style="background: blue;height: 220px;width: 220px;"></div>

Answer 1

我认为您需要像这样计算 blockOpacity:

blockOpacity = ($(window).height() + $(window).scrollTop() - block.offset().top) / blockHeight;