Geek asks and answers

Change CSS class after scrolling 1000 pixels down

I want the fixed menu to appear in the left column of my site as soon as the user scrolls 1000 pixels down, but I'm not very good at jQuery / JS. I thought something like this would work, but it does nothing:

HTML:

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

A TYPE:

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

AT:

Is there a reason this doesn't work? The code is an example at http://jsfiddle.net/roXon/psvn9/1/ , and even when I copy / paste this example just like it is on an empty html page, with the link from the latest jquery library, it is still not working like jsfiddle on this page. What can I ignore?

+5
source share
2 answers

, , :

CSS:

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

JS:

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

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

+17

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

1000px, - 100px,

0

More articles:


All Articles