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

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;
}

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

在我看来，我经常在登录页面上看到此功能。

标签： javascriptjqueryhtmlscroll