Help with jquery / Javascript / if / scroll

I want to rebuilt the the header from this webpage

which resizes if you scroll i played a little bit around and i think it should work something like this 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Untitled Document</title>

<link href="css/fix2.css" rel="stylesheet" type="text/css" />

<script src="jquery.min.js"></script>


$(document).ready(function() {

if ($("#drop").is($("#drop").scrollTop(0)))


    $("#drop").animate({height: "200px"});




    $("#drop").animate({height: "100px"});





<div id="drop">fdrgthdtgfrhdtg



but i am not that good with javascript and jquery to get the syntax needed right 

as you see i tried to but a jqueryfunction which sets scrollTop to 0 into the jqueryfunction which triggers the if statement but i dont think I did it right


Please  help me ;-) thanks in advance

Hey MrNonamesGrave,

So... I've checked the website and they don't use JS to alter css but rather to toggle CSS class called "sticky".

I been having issues with the forum... so I made you this jsFiddle:

Obviously, this is NOT a complete solution but rather something to get you started in the right direction... (view source option is always a good one ;)).