Change background position with jquery on scroll

Asked Oct 30 '12 at 10:43

Active Nov 02 '16 at 08:02

Viewed 2,107 times

Trying to change body background position with scroll position. the background image have these settings:

 background: #fff url(images/bg.png) center 100% no-repeat; background-attachment:fixed;

I have footer at that page with the height of 120px. I'm trying to change body background position (y axis) when the scroll reached to the footer with mouse wheel or scrollbars.

Edit:

I've manage to make it work both for mouse wheel and bars, in case someone needs to make a footer outside the "fixed" background.

$(window).scroll(function() {
        var def_bg_pos = 300;
        var footer = $(document).height() - 120; // footer height

        if($(window).scrollTop() + $(window).height() > footer) {
            var counter = ($(window).scrollTop() + $(window).height()) - footer;
            $('body').css('background-position', 'center '+ ((counter * -1) - def_bg_pos) + 'px');
        }
        else
            $('body').css('background-position', 'center -'+def_bg_pos+'px');
    });

<body style="background: #fff url(images/bg.png) center -300px no-repeat; background-attachment:fixed;">

edited Nov 02 '16 at 08:02

CroMagnon

1,218
7
20
32

asked Oct 30 '12 at 10:43

Y K

This can be done with jQuery. Have you coded anything yet? – Pulkit Mittal Oct 30 '12 at 11:06
You have it as background-attachment: fixed. Maybe need to change this to scroll? – questioner Oct 30 '12 at 12:01
grainne - the background-attachment: scroll, didnt work correctly as i wanted. the solution is posted in the post itself. thanks! – Y K Nov 11 '12 at 21:22

Change background position with jquery on scroll

0 Answers0