jquery - CSS 视差背景

Question

我目前正在开发https://dev.shivampaw.com/me我有一个名为“parallax-bg”的类，它应该制作视差背景。

对于底部的我的联系人(部分)，它还不能用于我的英雄(顶部)和纹理(中间)它工作正常。

这是我正在使用的 jQuery:

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

联系表单部分的 CSS 只是:

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;
}

对于英雄部分:

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;
}

有人知道为什么会这样吗？

谢谢

更新:视差是指固定背景。我使用 jquery，所以它也适用于手机。

Answer 1

我通过将我的 jQuery 更改为以下内容来解决此问题:

$(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');
    });
});

并在我的 html 中添加一个名为 position 的数据属性，其中类是 parallax-bg。这代表了我想要的背景位置 y 偏移量，它解决了问题。

我还从 CSS 中删除了不重复。