0

这很简单，虽然我遇到了麻烦。.proj页面上具有相同类 ( )的元素的多行。每个都占用 100% 的宽度。我希望在div.proj窗口顶部 200 像素内的那个有一个 class .focused，否则，如果它不在顶部附近，就有这个 class .default。我遇到的问题是挑出一个元素。

这就是我目前所处的位置，但它会找到所有元素.proj，而不仅仅是我正在寻找的元素。这是我到目前为止所拥有的，目前它根本不起作用。

$(document).scroll(function(){
    var proj = $('.proj'),
        top = proj.offset().top - $(document).scrollTop();
    if (top < 200 && !proj.is('.default')){
        $(proj).removeClass('focused').addClass('default');
    }
    if (top > 200 && proj.is('.default')){
        $(proj).removeClass('default').addclass('focused');
    }  
});
4

2 回答 2

1

我的示例适用于 200px 范围内的每个类元素。.proj对于挑选出单个元素，如果您的元素的高度> = 200px，它将起作用。如果不是，您应该告诉我们哪个是“挑出”单个元素的标准（例如最上面的？）在示例中，宽度不是 100%，但我希望这个概念很清楚

​$(window).scroll(checkScroll);

function checkScroll()
{
    $(".proj").each(function(i,e) {
            var tp = $(e).offset().top - $(document).scrollTop();
            $(e).toggleClass("focused",tp<200).toggleClass("default",tp>=200);
    });
}​​​​

检查 JSFiddle：http: //jsfiddle.net/hnYnS/

另请检查http://jsfiddle.net/hnYnS/2/以了解使用 100% 宽度并检查范围在 0 到 200px 之间的不同方法。

$(window).scroll(checkScroll);  
function checkScroll()
{
    $(".proj").each(function(i,e) {
            var tp = $(e).offset().top - $(document).scrollTop();
            var isOk = tp<200 && tp>=0;
            $(e).toggleClass("focused",isOk).toggleClass("default",!isOk);
        });
}​
于 2012-08-21T17:43:52.723 回答
-1

我想你只是想交换你 < 和 >

$(document).scroll(function(){
var proj = $('.proj'),
    top = proj.offset().top - $(document).scrollTop();
if (top > 200 && !proj.is('.default')){
    $(proj).removeClass('focused').addClass('default');
}
if (top < 200 && proj.is('.default')){
    $(proj).removeClass('default').addclass('focused');
}  
});

如果这不能解决问题，您应该为它创建一个 jsfiddle，这样我们就可以确切地看到发生了什么。

于 2012-08-21T17:26:00.373 回答