Thay đổi lớp CSS sau khi cuộn 1000px xuống

Question

Tôi muốn một menu cố định xuất hiện ở cột bên trái của trang web của tôi khi người dùng cuộn xuống 1000px, nhưng không có nhiều kinh nghiệm với jQuery/JS. Tôi nghĩ một cái gì đó như thế này sẽ làm việc nhưng nó không được làm bất cứ điều gì:

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:

Có một lý do này không hoạt động? Mã này là một ví dụ trên http://jsfiddle.net/roXon/psvn9/1/ và thậm chí khi tôi sao chép/dán ví dụ đó chính xác như nó vào một trang html trống, với một liên kết của thư viện jquery mới nhất, nó vẫn không hoạt động giống như trên trang jsfiddle đó. Tôi có thể nhìn gì?

Answer 1

niềng răng của bạn là sai trong ví dụ của bạn, nhưng không phân biệt, bạn có thể đơn giản hóa mã của bạn:

CSS:

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

JS:

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

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

Answer 2

Sửa như thế này

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

bạn đang tìm kiếm 1000px cuộn, nhưng nó xuất hiện 100px do này, từ mã của bạn