Ändern Sie die CSS-Klasse nach dem Scrollen 1000px nach unten

Question

Ich möchte ein festes Menü in der linken Spalte meiner Website angezeigt werden, wenn der Benutzer 1000px scrollt, aber ich bin nicht sehr erfahren mit jQuery/JS. Ich dachte, so etwas wie dies funktionieren würde, aber es ist nichts zu tun:

HTML:

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

STYLE:

#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:

Gibt es ein Warum funktioniert das nicht? Der Code ist ein Beispiel für http://jsfiddle.net/roXon/psvn9/1/, und selbst wenn ich dieses Beispiel genau so in eine leere HTML-Seite kopiere/einfüge, mit einem Link der neuesten jquery-Bibliothek, funktioniert es immer noch nicht wie auf dieser jfiddle-Seite. Was könnte ich übersehen?

Answer 1

sind Ihre Zahnspange in Ihrem Beispiel falsch, aber unabhängig, können Sie Ihren Code vereinfachen:

CSS:

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

JS:

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

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

Answer 2

bearbeiten wie dieses

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

Sie suchen 1000px blättern, aber es scheint 100px aufgrund dieser, aus dem Code