Parallax effect with jquery

Question

I am trying to incorporate a parallax effect on multiple sections throughout a page. The following code i'm using works for the first section (hero) but subsequent sections wont work because it's calculating the offset based off of the top of the page instead of the parent div. Any ideas?

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

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

Answer 1

Get the width of parent div or container and use parallax.

Try this

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

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

Hope this helps.