javascript - 我的视差滚动函数有什么错误？

Question

我试图让一些 div 以与页面其余部分不同的速度滚动，以创建视差效果。

这是我的 JS 和 HTML:

<div class="container">
    <div class="background">
        <img src="http://placehold.it/150x150/" />
    </div>
    <div class="background">
        <img src="http://placehold.it/150x150" />
    </div>
    <div class="foreground">
        <img src="http://placehold.it/100x100" />
    </div>
    <div class="foreground">
        <img src="http://placehold.it/100x100" />
    </div>
</div>

$(document).ready(function () {
    $('.container>div').each(function () {
        var iniPos = parseInt($(this).css('top'));
        var bgspeed = 0.5; //background speed
        var fgspeed = 0.8; //foreground speed
        var speed;
        if ($(this).attr('class') == 'foreground') speed = fgspeed;
        else speed = bgspeed;
        $(window).scroll(function parallax(iniPos, speed) {
            var top = $(window).scrollTop();
            var pos = iniPos + speed * top;
            $(this).css('top', pos + 'px');
        });
    });
});

(Fiddle)

但是所有 div 都以与页面其余部分相同的速度滚动，我无法找出为什么没有设置新的顶部位置。

Answer 1

两个原因:

1. 在您的视差中，this引用窗口，因此$(this).css() 没有意义。
   您需要在 parallax 函数外部、.each() 内部定义另一个变量，例如

   var that = this;
   

   然后在视差内使用$(that)。

2. 通过将 iniPos 和 speed 定义为函数参数:

   function parallax(iniPos, speed)
   

   你打破了这些值(value)观。 iniPos 将保存滚动Event 的值，而speed 则未定义。
   只需省略这两个参数即可，例如

   function parallax()
   

   (顺便说一句，您也可以省略函数名称。)

更新的 JS 代码:

$(document).ready(function () {
    $('.container>div').each(function () {
        var iniPos = parseInt($(this).css('top'));
        var bgspeed = 0.5; //background speed
        var fgspeed = 0.8; //foreground speed
        var speed = $(this).attr('class') == 'foreground' ? fgspeed : bgspeed;
        var that = this;
        $(window).scroll(function() {
            var top = $(window).scrollTop();
            var pos = iniPos + speed * top;
            $(that).css('top', pos + 'px');
        });
    });
});

[ Updated fiddle ]