JQuery footer div Parallax scrolling effect using body scroll value
Question
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
1 answers
solution1
0 ACCPTED 2015-04-04 10:09:58
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'});
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.