具有.background-position-y的视差Jquery .css函数

Question

i have a parallax that work with this function

var scaleBg = -$(window).scrollTop() / 3;
if (iOS === false) {
            $('.payoff').css('background-position-y', scaleBg - 150);
            $('.payoff2').css('background-position-y', scaleBg - 150);
            $('.social').css('background-position-y', scaleBg + 200);
        }

This not work on firefox becouse the background-position-y is not supported, how i can solve this for firefox?

Answer 1

You need to use the combined background-position property such as:

var scaleBg = -$(window).scrollTop() / 3;
if (iOS === false) {
    var payoffY = scaleBg - 150;
    var payoff2Y = scaleBg - 150;
    var socialY = scaleBg + 200;
    $('.payoff').css('background-position', '0px ' + payoffY + 'px');
    $('.payoff2').css('background-position', '0px ' + payoff2Y + 'px');
    $('.social').css('background-position', '0px ' + socialY + 'px');
}

Just for reference here the + is for concatenation not addition. The 0 is what ever you need the x position of your background to be.

This should be a more cross browser compatible way of assigning background-position.