降低屏幕外div的高度

Question

假设我有以下html / css

<div class="A">
    <div class="B" style="height:50px">
        ...
    </div>
</div>
<div class="D">
    ...
</div>

我想要做的是：当用户滚动得足够远以使div B不在屏幕上（不可见）时，请将B的高度更改为0px。从本质上讲，这意味着当D位于屏幕顶部时，将运行以下jQuery：

function changeBHeight() {
    $('.B').css("height","0px");
}

唯一的问题是，当发生这种情况时，页面现在变短了，因此浏览器会快速向下滚动页面50px。我怎么能阻止这个？

用户不应该意识到B已经崩溃，除非他们向上滚动到页面顶部。