滚动1000px后更改CSS类

Question

一旦用户向下滚动1000px,我想在我网站的左栏中显示一个固定的菜单,但对jQuery/JS不是很有经验.我认为这样的东西会起作用,但它没有做任何事情:

HTML:

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

样式:

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

问:

有什么理由不起作用吗？代码是http://jsfiddle.net/roXon/psvn9/1/上的一个示例,即使我将该示例完全复制/粘贴到空白的html页面中,并带有最新jquery库的链接,仍然不像在那个jsfiddle页面那样工作.我能俯瞰什么？

Answer 1

您的示例中的大括号错了,但无论如何,您可以简化代码:

CSS:

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

JS:

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

演示:http://jsfiddle.net/elclanrs/h3qyV/1/