Change CSS class after scrolling 1000px down
31,329
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/
Author by
taylor
Updated on December 04, 2020Comments
-
taylor over 3 years
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?