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

Question

Morning Coders,

Currently struggling with a JQuery snippet that FadesIn() FadesOut() specific div content when ScrollTop() parameters are met further down the page..

Everything is working except that the div content is position:fixed and as the page loads, the content displays awkwardly center screen until ANY scrolling triggers the animation and it fades out until the trigger point down the page *(where it fades in/out as it is supposed to).

What i'm looking for is a simple way to tell the div not to display on load UNTIL the ScrollTop() parameters are met..

I'm sure i'm missing an easy way to do this, but really can't find anything specific enough online without making the argument too convoluted.

The JQuery snippet is >

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

This is what the page looks like upon load:

This is a nice technique and knowing how to set it properly would come in useful to others as well!
Thanks guys

Answer 1

Just use .hide() :

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