Question

我的页面上有多个div，我想在它们的背景位置上设置动画，所以这就是我现在所拥有的

/* animate background possition on scroll */
$(window).scroll(function() {
    var y = $(this).scrollTop();
    if(y < $(".page-separator").offset().top && ( $(".page-separator").offset().top ) < ( y + $(window).height() ) ){
        $(this).css('background-position', '0% ' + parseInt(-y / 10) + 'px');
    }
});

但它不起作用。我认为这是因为$(this)目前无法显示$(".page-separator")，您能帮我解决一下吗？

所以我在这里修改了我的代码，但我再次堆叠，我无法将参数传递给.each jquery函数

$(window).scroll(function() {
    var y = $(window).scrollTop();
    $(".page-separator").each(function(y){
        //$(".page-separator").css('background-position', '0% ' + parseInt(-y / 10) + 'px');
        if( y < $(this).offset().top && ( $(this).offset().top ) < ( y + $(window).height() ) ){
            $(this).css('background-position', '0% ' + parseInt(-y / 10) + 'px');

        }console.log(y);
    });
});

当我看到console.log（y）时，它只显示0 1 2，而不是顶部位置

Answer 1

要更改可见background-position元素的.page-separator，您需要执行以下操作：

$(window).on('scroll', function() {
    var y = $(window).scrollTop();

    $(".page-separator").filter(function() {
        return $(this).offset().top < (y + $(window).height()) &&
               $(this).offset().top + $(this).height() > y;
    }).css('background-position', '0px ' + parseInt(-y / 10) + 'px');
});

FIDDLE

Answer 2

在这种情况下，

$(this) == $(window)。您应该为所有div添加一个类（例如：'animate'），并将其用作选择器（例如：$('.animate')）

JQuery在滚动中为多个div中的背景位置设置动画

2 个答案: