Search code examples
jquerycssparallax

JQuery footer div Parallax scrolling effect using body scroll value

I tought it would be simple to do a minor parallax effect on a footer 'div' background, using the 'body' scrollTop() to change the background-position

This is my trial, but the background of the footer 'div' doesn't move. I don't see what I'm doing wrong here:

HTML is like

<body>
<div class="footer_parallax"></div>
</body>

JS is like

$('body').scroll(function(){
var x = $(this).scrollTop();
$('.footer_parallax').css('background-position','0% '+parseInt(-x/10)+'px');
});

codepen here: http://codepen.io/ssstofff/pen/zxXyMp

Solution

  • Since codepen uses iframes I think theres some problem with fetching scroll element via body tag. When I changed it to window it worked.

    Here is full snippet (CSS method notation changed):

    $(window).scroll(function(){

  var x = $(this).scrollTop();

  $('.footer_parallax').css({'background-position': '0% '+parseInt(-x/10)+'px'});

});