Javascript JS（CSS）动态背景图像移动

我编写了一个小脚本，可以在页面滚动的同时制作一个向上滚动/按钮的照片背景。问题是背景图像在页面滚动后滚动（有延迟）

问题：我怎样才能像本例中那样通过页面滚动来移动背景图像

我用我的代码做了一个plnkr：

var bgcroll=函数（lastScrollTop，elem）{
lastScrollTop=$（窗口）.scrollTop（）；
$（elem.css（'transition'，'all.5s'）；
$（elem）.css（'background-position'，'0%'+parseInt（-lastcrollptop/2）+'px'）；
log（'lastScrollTop='+lastScrollTop）；
};
$（窗口）。加载（函数（）{
var-lastST=0；
var homelem='#添加外部容器'；
$（窗口）.on（“滚动”，函数（）{
bgScroll（lastST，homeElem）；
});
});
html，
身体{
身高：100%；
保证金：0；
填充：0；
背景颜色：灰色；
}
#添加外部容器{
宽度：100%；
高度：500px；
背景：#fff url(http://www.gettyimages.pt/gi-resources/images/Homepage/Hero/PT/PT_hero_42_153645159.jpg)无重复固定0%0%；
溢出：隐藏；
颜色：白色；
边框：1px纯红；
}

试验
你要找的是视差效应。有几个库可以帮助您（例如）。但最简单的解决方案可能是这样的：


//处理窗口滚动事件
$（窗口）。滚动（函数（）{
//存储滚动的距离
var scrolled=$（窗口）.scrollTop（）+1；
//设置滚动速度
var scrollSpeed=0.3；
//更新背景位置
$（“#添加外部容器”）.css（'background-position'，'0'+-（滚动*滚动速度）+'px'）；
});
正文{
最小高度：3000px；
}
#添加外部容器{
背景：url(http://www.gettyimages.pt/gi-resources/images/Homepage/Hero/PT/PT_hero_42_153645159.jpg)无重复固定；
宽度：100%；
高度：500px；
保证金：0自动；
边框：1px纯红；
}
1-从JS中删除以下行：
$（elem.css（'transition'，'all.5s'）
2-在CSS添加到#添加外部容器类中：

    transition: all 0.5s;
    transition-timing-function:cubic-bezier(0,0,0.2,1);

谢谢你的帮助。这就是我要寻找的。