视差背景位置

Question

我正在尝试使用jQuery实现滚动效果。 我有背景位置的变化取决于window.scroll顶部值，背景位置它向错误的方向移动的问题所以我需要任何解决方案使背景位置移动它正朝着正确的方向移动。

HTML

＆＃13;

＆＃13;

auto item = navigationBar.topItem;
item.hidesBackButton = YES;
item.hidesBackButton = NO;

＆＃13;

$(document).ready(function () {
    $(window).on('scroll', function () {
        var imgThumb = $(".blur .img-thumb"),
            backPosition = $(".blur .img-thumb div"),
            windowScroll = $(window).scrollTop()
        imgThumb.css('right', windowScroll * 3);
        backPosition.css('background-position', windowScroll * -.66 + "px" + " 50%");
        console.log(windowScroll * -.66)
        if (windowScroll == 0) {
            backPosition.css('background-position', "-245px" + " 50%");
        }
});
})

＆＃13;

* {
    margin: 0;
    padding: 0;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
body{
    height:6000px;
}
.blur{
    width:100%;
    height:620px;
    position:fixed;
    background:url("http://store1.up-00.com/2016-09/1472892032111.jpg") no-repeat center center;
}
.blur .img-thumb{
    position:absolute;
    width:420px;
    bottom:0;
    right:0;
}
.blur .img-thumb img{
    width:100%;
}
.blur .img-thumb div{
	width: 129px;
	height: 189px;
	position: absolute;
	background: url("http://store1.up-00.com/2016-09/1472892032252.jpg") no-repeat -245px center;
	top: 85px;
	left: 184px;
    border:1px solid #ff0000;
}

＆＃13;

＆＃13;

＆＃13;