[英]Change CSS class after scrolling 1000px down
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. 一旦用户向下滚动1000px,我想在我网站的左栏中显示一个固定的菜单,但对jQuery / JS不是很有经验。 I thought something like this would work but it isn't doing anything:
我认为这样的东西会起作用,但它没有做任何事情:
HTML: HTML:
<div id="menu">[MENU_WILL_GO_HERE]</div>
STYLE: 样式:
#menu{display:none;}
JQ: 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.
代码是http://jsfiddle.net/roXon/psvn9/1/上的一个示例,即使我将该示例完全复制/粘贴到空白的html页面中,并带有最新jquery库的链接,仍然不像在那个jsfiddle页面那样工作。 What could I be overlooking?
我能俯瞰什么?
Your braces are wrong in your example, but regardless, you can simplify your code: 您的示例中的大括号错了,但无论如何,您可以简化代码:
CSS : CSS :
#menu {
display : none;
position : fixed;
}
JS : JS :
$(document).scroll(function() {
$('#menu').toggle($(this).scrollTop()>1000)
});
Demo : http://jsfiddle.net/elclanrs/h3qyV/1/ 演示 : http : //jsfiddle.net/elclanrs/h3qyV/1/
Edit like this 像这样编辑
if( $(this).scrollTop() > 1000 )
you are looking for 1000px scroll,but it appears 100px due to this,from your code 你正在寻找1000px滚动,但由于你的代码,它出现了100px
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.