0

私は近いと思いますが、これを完成させるのに苦労しています。基本的に、各画像まで下にスクロールすると、ウィンドウの上部からのその画像のオフセットを含むdiv(バッファーとして-500)は.selected、左側のリスト要素にクラスを追加します。

http://jsfiddle.net/H6RTs/は私の例です

これが基本的に魔法が起こるコードです(一種):

        $(window).bind('scroll', function() {
        // What the current px is from vertical scroll
        var scrollY = window.pageYOffset;
        // They scrolled more than the original offset
        if (scrollY > menuTop) {
            if (menuClone.parent().length === 0) {
                $('#js-current-products').each(function(index, value) {
                    var newIndex = index + 1;
                    var currentProduct = $('.js-current-product-' + newIndex).offset().top - 500;
                    if (scrollY > currentProduct) {
                        $('.js-product-' + newIndex).addClass('selected');
                    }
                });

                stickyDiv.addClass(posFixed).width(clonedWidth);
                menuClone.after(stickyDiv.parent());

            }
        } else {
            $('#js-product-menu li').first().removeClass('selected');
            stickyDiv.removeClass(posFixed);
            menuClone.remove();
        }

    });

$('.js-current-product-1')クラスは最初のリスト項目に追加されますが、他の項目には追加されません(したがって、すべてを繰り返すのではなく、焦点を合わせ続けると思います(3になります)。

私は何が間違っているのですか?

4

2 に答える 2

1

2つのこと:

#EDIT-ゼータループスルーの方法ははるかにクリーンです:D#
1:

$('#js-current-products').each(function(index, value) {
    var newIndex = index + 1;
    var currentProduct = $('.js-current-product-' + newIndex).offset().top - 500;
    if (scrollY > currentProduct) {
        $('.js-product-' + newIndex).addClass('selected');
    }
});

画像のコンテナをループするだけですが、そのうちの1つしかないので、必要なのは画像自体をループすることです。prod1つの方法は、ループするときにクラスを追加して、インデックスを付けることです。

$('#js-current-products .js-current-product').each(function(index, value) {
    var newIndex = index + 1;
    $(this).removeClass('js-current-product').addClass('js-current-product-' + newIndex).addClass('prod');
});

#編集#

2:上にスクロールするときにもクラスを削除する必要がありselectedます。これは、テスト条件にelseを追加することで簡単に実行できます。

if (scrollY > currentProduct) {
    $('.js-product-' + newIndex).addClass('selected');
    console.log(newIndex);
} else {
    $('.js-product-' + newIndex).removeClass('selected');
}

私はそれがすべてだとかなり確信しています、ここでフィドルを見てください:http: //jsfiddle.net/H6RTs/3/

乾杯
チャーリー

于 2012-04-13T07:11:29.950 に答える
0

で識別されるすべての要素に対してのみ反復しますid="js-current-products"。このセレクターに一致する要素は1つだけです。それで

if (scrollY > menuTop) {
    if (menuClone.parent().length === 0) {
        $('#js-current-products').each(function(index, value) {
             // matches only one product ....

する必要があります

if (scrollY > menuTop) {
    if (menuClone.parent().length === 0) {
        $('#js-current-products div.border').each(function(index, value) {
             // matches all products, but has to use div.border, since 
             // you changed your class names....

または同様のもの。また、クラス名を変更して、要素ごとに一意のクラス名を作成しないでください。それらはクラス名であり、識別子ではありません。

$('#js-current-products .js-current-product').each(function(index, value) {
    var newIndex = index + 1;
    $(this).attr('id','js-current-product-' + newIndex);
});

クラスを乱用しない場合は、.selectedクラスを非常に簡単に削除することもできます。

if (scrollY > currentProduct) {
    $('#js-product-menu li').removeClass('selected');
    $('#js-product-' + newIndex).addClass('selected');     
}

デモンストレーション

于 2012-04-13T07:10:34.133 に答える