使用 margin-top 滚动视差

Question

下面的内容适用于背景位置：但是当尝试使用 margin-top 在不同的元素上使用相同的效果时它不起作用：第二个元素没有背景 - 但 div与内容。有什么建议吗？

function parallax() {
    setpos(".filter-page");
    setpos(".filter");
//    setpos(".filter", 4);
//    setpos("#pb3");
//    setpos("#pb4");
}

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

    var offset = $(".filter-page").offset();
    var w = $(window);

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

    $(".filter-page").css('background-position', '10% '+posy+'px');
//    $(".filter").css('background-position', '15% '+posy+'px');

    $(".filter").css('margin-top', '10% '+posy+'px');
}

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

Answer 1

当你使用

$(".filter-page").css('background-position', '10% '+posy+'px');

这意味着您正在设置 x (10%) 和 y(posy pixels) 的值 background-position, 这是此属性 (http://www.w3schools.com/cssref/pr_background-position.asp) 的有效值 - 因为您可以同时设置 X 和 Y。

但是属性 margin-top 不需要这种值 (http://www.w3schools.com/cssref/pr_margin-top.asp)。无法将 X 和 X 值设置为 "margin-top"。该属性只有一个值需要设置。因此，如果您同时删除 10% 或 posy px，这将起作用。

使用 margin-top 滚动视差

scroll parallax using margin-top

javascript

jquery

css

parallax