Get bg-image and position from div and give it to another dynamically

Question

I tried to get the background-image and position from a div and give it to the background of the navigation.

$(document).ready(function(jQuery){
    var bgimg = $('.stripe-style-2').css('backgroundImage');
    var bgpos = $('.stripe-style-2').css('background-position');

    $(window).scroll(function () {

    $('.fix #main-nav').css('background-image', bgimg);
    $('.fix #main-nav').css('background-position', bgpos);

    });
});

The navigation gets the background-image and position from .stripe-style-2 but if i scroll down the background-positon changes to (for example):

background-position: 50% -178px

and nothing happens with the background-position of .fix #main-nav:

background-position: 50% 0

How can i fix this?

Answer 1

It looks to me like you just need to get the latest position value before applying it...

$(document).ready(function(jQuery){
    var bgimg = $('.stripe-style-2').css('backgroundImage');

    $(window).scroll(function () {

        var bgpos = $('.stripe-style-2').css('background-position');

        $('.fix #main-nav').css('background-image', bgimg);
        $('.fix #main-nav').css('background-position', bgpos);

    });
});

You were previously getting it only once and that variable would never change, despite the background position changing.