下滑1000像素后更改CSS类

Question

当用户向下滚动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页面上那样工作。我可能忽略了什么？

- taylor

Answer 1

你的示例中大括号使用不正确，但无论如何，你都可以简化你的代码： CSS:

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

JS:

（翻译：）

JS:

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

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

- AlienWebguy

---

更简洁的写法：在滚动距离超过1000像素时，切换菜单的显示和隐藏。代码为：$('#menu').toggle($(this).scrollTop()>1000)。 - elclanrs

啊，好老的切换功能，我怎么把你忘了？老实说，我忘了它需要一个布尔参数。干得好，朋友。 - AlienWebguy

这正好符合我的要求，但我无法在任何页面上执行脚本。它需要放在特定的<script></script>标签中还是在HTML代码之前或之后？我无法弄清楚为什么它没有执行，而且它与fiddle中的完全相同。 - taylor

@ZackTaylor：是的。你需要放置 <script type="text/javascript"> 你的代码 </script>。 - Sangram Nandkhile

Answer 2

像这样编辑

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

你正在寻找1000像素的滚动，但由于你的代码，它只显示了100像素。

- GautamD31