Jquery 与绝对位置和固定位置相同

我有一个元素“#天空”，它有绝对位置和正确位置-318px。 我想在滚动时修复此元素，但仅在达到页面高度的一半之前。然后是什么，让它再次绝对化。我有以下代码：

var elementPosition = $('#sky').offset();
$(window).scroll(function(){
    if($(window).scrollTop() > elementPosition.top){
          $('#sky').css('position','fixed').css('top','0').css('right','0');
    } else {
        $('#sky').css({
            'right':'-318px',
            'position':'absolute'
        });
    }
    if ($(window).scrollTop() > $('#wrapper-bottom-new').height() / 2) {
        $('#sky').css({
            'right':'-318px',
            'position':'absolute'
        });
    }     
});

问题是当它将位置更改为固定位置时，我无法获得相同的正确位置。我已将其设置为0，但它不在同一位置。有没有办法达到同样的效果？

$（文档）.ready（函数（）{
var elementPosition=$（“#天空”）.offset（）；
$（窗口）。滚动（函数（）{
if（$（window.scrollTop（）>elementPosition.top）{
$（'#sky'）.css（'position'，'fixed'）.css（'top'，'0'）.css（'right'，'0'）；
}否则{
$（“#天空”）.css({
'右'：'-318px'，
“位置”：“绝对”
});
}
如果（$（窗口）.scrollTop（）>$（'#包装器底部新建'）.height（）/2）{
$（“#天空”）.css({
'右'：'-318px'，
“位置”：“绝对”
});
}     
});
});
.wrapper{
位置：相对位置；
}
.中{
高度：3000px；
背景：红色；
位置：相对位置；
宽度：640px；
浮动：左；
}
.天空{
宽度：305px；
身高：100%；
右：-318px；
位置：绝对位置；
}
.w300h600{
宽度：300px；
高度：600px；
边缘底部：10px；
}

请提供更多信息，说明它现在的样子，或者首选Codepen。@DhavalJardosh我添加了JSFIDDLE请显示您希望输出的样子？相同的位置，但在我开始滚动时已修复。