jQuery页脚div使用主体滚动值的视差滚动效果

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 我坚信，使用“ body” scrollTop（）更改背景位置，对页脚“ div”背景进行轻微的视差效果很简单

This is my trial, but the background of the footer 'div' doesn't move. 这是我的试用，但是页脚“ div”的背景没有变化。 I don't see what I'm doing wrong here: 我在这里看不到我在做什么错：

HTML is like HTML就像

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

JS is like JS就像

$('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 此处的codepen： http ://codepen.io/ssstofff/pen/zxXyMp

Answer 1

Since codepen uses iframes I think theres some problem with fetching scroll element via body tag. 由于Codepen使用iframe，因此我认为通过body标签获取滚动元素存在一些问题。 When I changed it to window it worked. 当我将其更改为window它可以工作。

Here is full snippet (CSS method notation changed): 这是完整的代码段（CSS方法符号已更改）：

$(window).scroll(function(){

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

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

});

jQuery页脚div使用主体滚动值的视差滚动效果

问题描述

HTML is like HTML就像

JS is like JS就像

1 个解决方案

解决方案1
0 已采纳 2015-04-04 10:09:58

jQuery页脚div使用主体滚动值的视差滚动效果

问题描述

HTML is like HTML就像

JS is like JS就像

1 个解决方案

解决方案1 0 已采纳 2015-04-04 10:09:58

解决方案1
0 已采纳 2015-04-04 10:09:58