多个全屏Div上的视差

Question

我有一系列8个全屏div，我已经成功地将最基本的视差效果应用到第一个。

我想做的是对div 3,5和7应用相同的视差效果。

这是我的JavaScript：

jQuery(document).ready(function() {
    $(window).scroll(function(e) {
        parallaxScroll();
    });

    function parallaxScroll() {
        var scrolled = $(window).scrollTop();
        $('#parallaxone').css('top', (0 - (scrolled * 0.25)) + 'px');
    }
});

这是我的HTML：

<div class="spa-container spa-container-header" id="introduction">
    <div class="spa-add-image" id="parallaxone"></div>
</div>

这是我的CSS：

html, body {
    height: 100%;
    margin: 0;
}

.spa-container {
    height: 100%;
    min-height: 100%;
}

.spa-add-image {
    width: 100%;
    height: 100%;

    position: absolute;

    z-index: 1;

    background: no-repeat center center;
    background-size: cover;
}

.spa-container-header .spa-add-image {
    background-image: url(../img/foleysbridge.jpg);
    background-size: cover;
}

所有div都是一样的。

我不确定如何实现这一目标，所以非常感谢任何帮助。

谢谢，

马修