jquery 的视差效果

Question

我试图在整个页面的多个部分中加入视差效果。 我使用的以下代码适用于第一部分（英雄），但后续部分将不起作用，因为它是基于页面顶部而不是父 div 计算偏移量。 有任何想法吗？

function parallax(){
    var scrolled = $(window).scrollTop();
    $('.parallax').css({'transform':'translate(0px,'+scrolled /10+'%'});
}

$(window).scroll(function(e){
    parallax();
});

Answer 1

获取父 div 或容器的宽度并使用视差。

尝试这个

function parallax(){
    var scrolled  = $(".container").parent().width();
    $('.parallax').css({'transform':'translate(0px,'+scrolled /10+'%'});
}

$(window).scroll(function(e){
    parallax();
});

希望这可以帮助。