Cambiar la clase CSS después de desplazarse 1000px hacia abajo

Question

Quiero que aparezca un menú fijo en la columna izquierda de mi sitio una vez que el usuario se desplace 1000px hacia abajo, pero no tengo mucha experiencia con jQuery/JS. Pensé que algo así iba a funcionar, pero no hace nada:

HTML:

<div id="menu">[MENU_WILL_GO_HERE]</div> 

ESTILO:

#menu{display:none;}​ 

JQ:

var fixed = false; 
​$(document).scroll(function() { 
    if($(this).scrollTop() > 100) { 
     if(!fixed) { 
      fixed = true; 
      $('#menu').css({position:'fixed', display:'block'}); 
     } 
     } else { 
      if(fixed) { 
       fixed = false; 
       $('#menu').css({display:'none'}); 
     } 
    } 
});​ 

Q:

¿Hay un ¿Por qué esto no funciona? El código es un ejemplo en http://jsfiddle.net/roXon/psvn9/1/, e incluso cuando copie/pegue ese ejemplo exactamente como está en una página html en blanco, con un enlace de la biblioteca jquery más reciente, todavía no funciona como lo hace en esa página jsfiddle. ¿Qué podría estar pasando por alto?

Answer 1

Sus frenos son mal en su ejemplo, pero sin tener en cuenta, se puede simplificar el código:

CSS:

#menu { 
    display : none; 
    position : fixed; 
} 

JS:

$(document).scroll(function() { 
    $('#menu').toggle($(this).scrollTop()>1000) 
});​ 

demostración : http://jsfiddle.net/elclanrs/h3qyV/1/

Answer 2

Editar como esto

if($(this).scrollTop() > 1000) 

que están buscando 1000px de desplazamiento, pero parece 100px debido a esto, a partir del código