JQuery: 在 ScrollTop() 显示进一步向下的页面之前隐藏 div 内容？

Question

程序员早安，

目前正在努力处理一个 JQuery 片段，当在页面下方进一步满足 ScrollTop() 参数时，FadesIn() FadeOut() 特定 div 内容..

一切正常，除了 div 内容是 position:fixed 并且随着页面加载，内容会笨拙地显示在屏幕中央，直到任何滚动触发动画并且它淡出直到触发点向下页面 *（它应该消失的地方 in/out）。

我正在寻找的是一种告诉 div 在满足 ScrollTop() 参数之前不要在加载时显示的简单方法。

我确定我错过了一个简单的方法来做到这一点，但真的无法在网上找到足够具体的东西而不会使争论过于复杂。

JQuery 片段是 >

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

   $(document).scroll(function () {
    var x = $(this).scrollTop();
    if (x > 800 && x < 1600) {
        $('#blurb-box').stop().fadeIn(100);
    }
    else{
        $('#blurb-box').stop().fadeOut(100);
    }
});

页面加载后的样子：

这是一项很好的技术，知道如何正确设置它对其他人也很有用！
谢谢大家

Answer 1

只需使用 .hide() :

$('#blurb-box').hide();
if(x > 800 && x < 1600){
 $('#blurb-box').fadeIn(100);
}

JQuery: 在 ScrollTop() 显示进一步向下的页面之前隐藏 div 内容？

JQuery: hide div content before ScrollTop() reveal further down page?

css

jquery

scroll

hide

fadein