JQuery 页脚 div 使用正文滚动值的视差滚动效果

JQuery footer div Parallax scrolling effect using body scroll value

我认为使用 'body' scrollTop() 改变背景位置

在页脚 'div' 背景上做一个小的视差效果会很简单

这是我的试用版，但是页脚的背景 'div' 没有移动。我看不出我做错了什么：

HTML 就像

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

JS就像

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

代码笔在这里：http://codepen.io/ssstofff/pen/zxXyMp

由于 codepen 使用 iframe，我认为通过 body 标签获取滚动元素存在一些问题。当我将其更改为 window 时，它起作用了。

这是完整的代码片段（CSS 方法符号已更改）：

$(window).scroll(function(){

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

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

});