Element appearing on load and then disappears

Question

I'm making a horizontal scrolling site. I'm using this script for letting an element fade in when user scrolls past 1500px.

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

Problem is: on page load the element appears. When I start scrolling it disappears and re appears when I hit 1500px. I want it to be invisible until I reach 1500px.

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

Answer 1

Add a display:none to it ( #form_1_container ) in CSS .

Answer 2

$(function() {
     $('#form_1_container').hide();
});

The above code will hide it when the page loads.

Else in terms of CSS:

#form_1_container {
     display: none;
}

Both will hide the form container initially. When the scroll event is triggered, once 1500 is crossed the form container will be visible.