jquery - event not working when element reached top -

i want navigation animate top when scroll "ghost" or helper div window top. used this:

$(window).scroll(function() {     var y = $(".ghost").offset().top;     var scrolly = $(window).scrolltop();     if (scrolly >= y) {       $("nav").animate({margin-top: "-50px"}, 750);        }       else{        $("nav").animate({margin-top: "0px"}, 750);         }  }); 

but not bring desired result. when ghost div reaches top, there no effect on nav. fiddle here: http://jsfiddle.net/e8xj4/ in advance.

change

  $("nav").animate({margin-top: "-50px"}, 750); 

to

  $("nav").animate({margintop: "-50px"}, 750); 

or

  $("nav").animate({"margin-top": "-50px"}, 750); 

from jquery's css documentation :

jquery can equally interpret css , dom formatting of multiple-word properties. example, jquery understands , returns correct value both .css( "background-color" ) , .css( "backgroundcolor" ).