滚动时禁用页面滚动时的动画元素

Question

我想在网站上建立一个欢迎屏幕，它会随着滚动逐渐减少，但页面本身不会在那一刻滚动。当项目减少到所需值时，页面将照常滚动。 像这样https://jsfiddle.net/dpaLrk82/4/

JS

$(window).scroll(function(){
    if ($(".hello").css('height') != "100px") {
        $(window).scrollTop(0)
        $(".hello").css('height', '-=20px');
    }
});

HTML

<div class="hello">
    <h1>Hello</h1>
</div>

<div class="container">Content</div>

CSS

.hello {
    min-height: 100px;
    height: 100vh;
    background: #ccc;
}
.container {
    height: 100vh;
    background: #eee;
}

但这些只是草图效果不佳，特别是在移动浏览器中。

在我看来，我经常在着陆页上看到此功能。