向下滚动 1000px 后更改 CSS 类答案

【问题标题】：Change CSS class after scrolling 1000px down向下滚动 1000px 后更改 CSS 类
【发布时间】：2012-09-10 08:11:37
【问题描述】：

一旦用户向下滚动 1000 像素，我希望在我的网站的左栏中显示一个固定菜单，但我对 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 上那样工作页。我可以忽略什么？

【问题讨论】：

标签： jquery css scroll fixed

【解决方案1】：

您的示例中的大括号是错误的，但无论如何，您都可以简化代码：

CSS：

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

JS：

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

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

【讨论】：

更短：$('#menu').toggle($(this).scrollTop()>1000)。 jsfiddle.net/elclanrs/h3qyV/1
啊，好老的切换，我怎么忽略了你？老实说，忘记了它需要一个布尔参数。很好，朋友。
这正是我想要的，但我无法让脚本在任何页面上执行。它需要在某个标记中还是在 HTML 代码之前或之后？我不知道为什么它没有执行，它与小提琴中的代码完全相同。
@ZackTaylor：是的。您需要输入<script type="text/javascript"> your code </script >。

【解决方案2】：

像这样编辑

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

您正在寻找 1000 像素的滚动，但由于这个原因，您的代码显示为 100 像素

【讨论】：