Search code examples
javascriptjquerycssparallax

scroll parallax using margin-top

The below works with background-position: but it does not work when trying to use the same effect on a different element using margin-top: the second element does not have a background - but is div with content. Any suggestions?

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();
});
Solution

  • When you use

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

    it means you're setting the values x (10%) and y(posy pixels) of the background-position, wich is a valid value to this property (http://www.w3schools.com/cssref/pr_background-position.asp) - because you can set both X and Y at the same time.

    However the attribute margin-top does not expect this kind of value (http://www.w3schools.com/cssref/pr_margin-top.asp). There is no way to set X and X values to "margin-top". This attribute has only one value to be setted. So, if you remove both 10% or posy px this will work.