视差图像跳跃

Question

我使用了一个关于为背景图像制作视差效果的教程。在初始滚动时，图像在容器div的一半处跳跃。我认为背景位置开始偏高存在问题。我不太确定在哪里调整代码以获得最佳结果。有人可以为我澄清一下吗？

这是小提琴：

https://jsfiddle.net/1og1L34j/

查看代码：

HTML ：

<div id = "why" class="plate"></div>
<div id = "how" class = "plate"></div>
<div id = "what" class = "plate"></div>

CSS：

    html, body{
    height: 100%;
    width: 100%;
}


.plate{
    height: 100%;
    width: 100%;
    background-color: grey;
    border: 5px solid black;
}

#why{
    height: 90%;
    width: 100%;
    border: 5px solid black;
    background-image: url("/assets/image/rembck.jpg") ;
    background-size: cover;
    background-color: #080808;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

JS：

var velocity = 0.5;

function update(){
    var pos = $(window).scrollTop();
    $('#why').each(function() {
        var $element = $(this);
        // subtract some from the height b/c of the padding
        var height = $element.height()-18;
        $(this).css('backgroundPosition', '50% ' + Math.round((height - pos) * velocity) +  'px');
    });
};

$(window).bind('scroll', update);