背景中心视差效果跳到顶部

Question

我使用以下代码为背景图像提供简单的视差效果。理想情况下，在 css 中，我希望图像居中（而不是顶部）。但是，一旦我开始滚动脚本，脚本就会将其跳到顶部并开始效果。我无法确定是否可以更改 jquery 以便它以居中图像开头？谁能帮忙？

<div id="para" style="background-image: url('blah')" data-speed="8" data-type="background">
</div>
#para {
    height:500px;
    float:left;
    width:100%;
    background-size:100%;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachemnt: fixed; 
}
//Parallax
$(document).ready(function() {
    if ($(window).width() > 1025) {
        // Cache the Window object
        $window = $(window);
        $('div[data-type="background"]').each(function() {
            var $bgobj = $(this);
            $(window).scroll(function() {
                var yPos = -($window.scrollTop() / $bgobj.data('speed'));
                var coords = '50% ' + yPos + 'px';
                $bgobj.css({
                    backgroundPosition: coords
                });
            });
        });
    }
});

Answer 1

您不能为背景位置提供百分比和像素。它应该是其中之一。使用百分比单位，然后将 $window.scrollTop（） 也转换为百分比。因此，将其乘以 100，然后除以 $window.height（）。

//Parallax
$(document).ready(function() {
    if ($(window).width() > 1025) {
        // Cache the Window object
        $window = $(window);
        $('div[data-type="background"]').each(function() {
            var $bgobj = $(this);
            $(window).scroll(function() {
                var yPos = 50 - ($window.scrollTop() * 100 / $window.height() / $bgobj.data('speed'));
                var coords = '50% ' + yPos + "%";
                $bgobj.css({
                    backgroundPosition: coords
                });
            });
        });
    }
});

您的数据速度属性也需要降低。我发现 0.5 效果很好。

<div id="para" style="background-image: url('blah')" data-speed="0.5" data-type="background">