Fade in on scroll and fade out on scroll

Question

I'm new to this stuff.

I'm using this to make a div appear on scroll and to make it disappear when I scroll further.

It's working pretty good. It fade's out when I pass 1750. But on page load the div is already there. It should appear when I scroll past 1500.

What I need is the div be visible between 1500 and 1750. Hope you can help!

   <script type="text/javascript">
$(document).scroll(function () {
var x = $(this).scrollTop();
if (x > 1500) {
$('#form_1_container').fadeIn(150);
} if (x > 1750) {
$('#form_1_container').fadeOut(150);
}
});
</script>

This is the site = http://www.stilld.nl/brrreuk/

You can see if you scroll, that the div appears and disappears. But then it start to pulse...

I'm using display=none on my div.

Answer 1

You can try this

$(document).scroll(function () {
    var x = $(this).scrollTop();
    if (x > 1500 && x < 1750) {
        $('#form_1_container').stop().fadeIn(150);
    }
    else{
        $('#form_1_container').stop().fadeOut(150);
    }
});