javascript - Div that appears on Scroll but not on page load

Question

I'm making this web page and I want a div to appear only on scrolling down 300px from the top of the page. This is the JavaScript i borrowed from the net:

<script type="text/javascript">
$(document).ready(function(){
$(window).scroll(function(){
var y = $(window).scrollTop();
if(y > 300){
  $("#topdiv").fadeIn("slow");
 } else {
  $("#topdiv").fadeOut("fast");
}})});</script>

The only issue with this is that when the page loads, the div appears on top and then disappears once the user starts scrolling. I dont want the div to appear once the page loads. Something like this is exactly what i want:

http://www.calmdigital.com/

Would greatly appreciate help!

Answer 1

on document ready hide the div

$(function(){
if($("#topdiv").length>0)
 $("#topdiv").hide();
});

or hide it via css

#topdiv{
 display:none;
}