0

我想我已经接近了，但我在尝试完成这一点时遇到了麻烦。基本上，当您向下滚动到每个图像时，包含该图像与窗口顶部的偏移量（-500 作为缓冲区）的 div 将向.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 - Zeta 循环的方式要干净得多：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');
    }
});

你只是循环通过图像的容器，其中只有一个，所以你需要做的是循环图像本身。一种方法是在循环时将类添加prod到它们并给它们一个索引，即：

$('#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"。只有一个元素匹配此选择器。所以

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 回答