Modifica classe CSS dopo aver scostato 1000px in basso

Question

Desidero visualizzare un menu fisso nella colonna sinistra del mio sito una volta che l'utente scorre 1000 pixel verso il basso, ma non ho molta esperienza con jQuery/JS. Ho pensato che qualcosa di simile potrebbe funzionare, ma non sta facendo nulla:

HTML:

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

STILE:

#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'}); 
     } 
    } 
});​ 

D:

C'è un motivo per cui questo non funziona? Il codice è un esempio su http://jsfiddle.net/roXon/psvn9/1/ e anche quando copio/incollo quell'esempio esattamente come è in una pagina html vuota, con un collegamento dell'ultima libreria jquery, non funziona ancora come in quella pagina jsfiddle. Cosa potrei trascurare?

Answer 1

tua parentesi sono sbagliate nel tuo esempio, ma a prescindere, è possibile semplificare il codice:

CSS:

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

JS:

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

Demo : http://jsfiddle.net/elclanrs/h3qyV/1/

Answer 2

Modifica come questo

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

siete alla ricerca di 1000px di scorrimento, ma sembra 100px a causa di questo, dal codice