视差滚动工作在1图像，但不在其他 [英] Parallax scroll working on 1 image but not on other

问题描述

我正在努力给我的背景图片的2个视差效果，它是在第一个图像，而不是在第二个图像。代码如下

I am working on giving parallax effect to 2 of my background images and it is working on the first image but not on the second image..the code is as below

jquery：

$(document).ready(function() {
$('section[data-type="background"]').each(function() {

        var $bgobj = $(this); // assigning the object

        $(window).scroll(function() {

            // scroll the background at var speed
            // the yPos is a negative value because we're scrolling it UP!

            var yPos = -($window.scrollTop() / $bgobj.data('speed'));

            // Put together our final background position
            var coords = '50% '+ yPos + 'px';

            // Move the background
            $bgobj.css({ backgroundPosition: coords });

        }); // end window scroll

    });

});

HTML： -

<section class="parallax" data-type="background" data-speed="5">
        <h2>Check out this cool parallax scrolling effect. Use these ribbons to display calls to action mid-page.</h2>
        <button class="btn btn-lg btn-info">PARALLAX</button>

    </section>

CSS： -

.parallax {
    height:35em;
    background: url('https://images.unsplash.com/photo-1463123081488-789f998ac9c4?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=6d1a6d1c5a7eb63d0c411b1d019f0b30');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.parallax h2 {
    color: white;
    text-align: center;
    padding: 1em;
    padding-top: 5em;
}

.parallax button {
    display: block;
    margin: 2em auto;
}

奇怪的部分是第二张图片根本不显示，如果我删除数据速度属性，但视差不工作。我被困和困惑所以请协助..

The weird part is that the second image does not show at all and shows only if I remove data-speed attribute but then the parallax does not work..I am stuck and confused so please assist..

推荐答案

您正在使用$ window.scrollTop（），它会随着向下滚动页面而变大，并相对于图像容器的顶部设置。似乎你需要先从文档顶部减去元素位置：

You are using $window.scrollTop(), which will get bigger as you scroll down the page, and setting that relative to the top of the image container. Seems like you need to subtract the elements position from the top of the document first:

$(document).ready(function() {
$('section[data-type="background"]').each(function() {

    var $bgobj = $(this); // assigning the object

    $(window).scroll(function() {

        // scroll the background at var speed
        // the yPos is a negative value because we're scrolling it UP!

        var yOffset = $bgobj.offset().top;
        var yPos = -(($window.scrollTop() - yOffset) / $bgobj.data('speed'));

        // Put together our final background position
        var coords = '50% '+ yPos + 'px';

        // Move the background
        $bgobj.css({ backgroundPosition: coords });

    }); // end window scroll

});

});

您的第一张图片可能会在页面顶部工作，因此偏移量无关紧要？

Your first image is likely working as it's at the top of the page so the offset doesn't matter?

这篇关于视差滚动工作在1图像，但不在其他的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！