CSS视差背景

Question

I am currently developing https://dev.shivampaw.com/me and I have a class called "parallax-bg" which should make a parallax background.

For my contact (section) right at the bottom, it isn't working yet for my hero (top) and texture (middle) it works fine.

This is the jQuery I am using:

$(window).scroll(function() {
  var scrolledY = $(window).scrollTop();
  $('.parallax-bg').css('background-position', 'center ' + ((scrolledY) - 70) + 'px');
});

And the CSS for the contact form section is just:

section#contact{
    background: linear-gradient(to bottom, rgba(0,0,0, 0.65) 0%,rgba(0,0,0, 0.65) 100%), url(https://www.shivampaw.com/images/bg-contact.jpg) no-repeat center -70px;
    background-size: cover;
    background-attachment: scroll;
    color: white;
}

And for the hero section:

section#hero{
    background: linear-gradient(to bottom, rgba(0,0,0, 0.65) 0%,rgba(0,0,0, 0.65) 100%), url(https://www.shivampaw.com/images/top-bg.jpg) no-repeat center -70px;
    background-size: cover;
    background-attachment: scroll;
    text-align: center;
    color: white;
    font-weight: bold;
    padding-bottom: 50px;
}

Does anyone know why this is happening?

Thanks

Update: by parallax I mean fixed background. I use jquery so it works on mobiles as well.

Answer 1

I fixed this by changing my jQuery to the following:

$(window).on('scroll resize load',function(){
    // 500px
    var scrolledY = $(window).scrollTop();
    $('.parallax-bg').each(function(){
        $obj = $(this);
        var pixelsY = $obj.data("position");
        $obj.css('background-position', 'center ' + ((scrolledY) + pixelsY) + 'px');
    });
});

And add a data attribute called position in my html where the class parallax-bg is. This represented my desired background position y offset which fixed the problem.

I also removed the no-repeat from the CSS.