在向下滚动1000像素后更改CSS类 [英] Change CSS class after scrolling 1000px down

问题描述

我想要一个固定的菜单出现在我的网站的左侧列，当用户向下滚动1000px，但我不是很有经验的jQuery / JS。我认为这样的东西可以工作，但它不会做任何事情：

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

问：

一个原因这不工作？此代码是 http://jsfiddle.net/roXon/psvn9/1/ 上的示例，甚至当我复制/粘贴该示例，它是一个空白的html页面，与最新的jquery库的链接，它仍然不工作，就像它在那个jsfiddle页面。我可以俯瞰什么？

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?

推荐答案

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

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

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

这篇关于在向下滚动1000像素后更改CSS类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！