Question

我是整个建筑主题的新手，我在努力解决一段代码。

这是问题所在。除了视差图像不按预期滚动外，一切正常并正确加载。我希望为每个目标ID重置滚动效果，因为现在只有第一个图像滚动，其余的是固定的。

所以，如果我正确，我需要以某种方式重置每个div的图像位置。

我很感谢你的帮助。

Best / Fredrik

HTML标记：

<div class="parallaxbox" id="pb" style="background-image: url('');">
            <h1><?php the_title(); ?></h1>
        </div>

JS：

function parallax() {
    setpos("#pb");
}



function setpos(element, factor) {
    factor = factor || 1.5;

    var offset = $(element).offset();
    var w = $(window);

    var posx = (offset.left - w.scrollLeft()) / factor;
    var posy = (offset.top - w.scrollTop()) / factor;

    $(element).css('background-position', '100% '+posy+'px');

}

$(document).ready(function () {
    parallax();
}).scroll(function () {
    parallax();
});

CSS：

.parallaxbox {
    position: relative;
    background: #444;
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center center;
    z-index: -1;
}

Answer 1

听起来问题在于你的jQuery选择器。您正在使用ID选择器$("#pb")，它只返回它在ID为'pb'的DOM中找到的第一个元素，这可以解释为什么视差效果不会应用于其他元素。

如果你需要匹配多个元素，你应该使用jQuery的类选择器，如下所示：

function parallax() {
    setpos(".parallaxbox");
}

工作示例jsfiddle

视差滚动，每个类的循环脚本

1 个答案: