Change CSS class after scrolling 1000px down

Question

I want a fixed menu to appear in the left column of my site once the user scrolls 1000px down, but am not very experienced with jQuery/JS. I thought something like this would work but it isn't doing anything:

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:

Is there a reason this doesn't work? The code is an example on http://jsfiddle.net/roXon/psvn9/1/, and even when I copy/paste that example exactly as it is into a blank html page, with a link of the latest jquery library, it still doesn't work like it does on that jsfiddle page. What could I be overlooking?

Answer 1

Your braces are wrong in your example, but regardless, you can simplify your code:

CSS:

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

JS:

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

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