0

悩みながらも簡単です。ページ上の同じクラス ( .proj) を持つ要素の複数の行。それぞれが 100% の幅を取ります。div.projウィンドウの上部から 200 ピクセル以内にある に class を持た.focusedせたい.defaultです。私が抱えている問題は、1つの要素を選び出すことです。

現時点ではここにいますが、探している要素.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/

100％の幅を使用し、0〜200ピクセルの範囲をチェックする別のアプローチについては、http：//jsfiddle.net/hnYnS/2/も確認してください。

$(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 に答える