绝对和固定具有相同的正确位置

Question

我有一个元素＆＃34;＃sky＆＃34;它具有绝对位置和正确位置-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但它不在同一位置。有什么办法可以达到同样的效果吗？ Absolute position Fixed position

＆＃13;

＆＃13;

$(document).ready(function() {
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'
            });
  		}     
});
});

＆＃13;

.wrapper {
  position: relative;
}

.middle {
  height: 3000px;
  background:red;
  position: relative;
  width: 640px;
  float: left;
}

.sky {
  width: 305px;
  height: 100%;
  right: -318px;
  position:absolute;
}

.w300h600 {
    width: 300px;
    height: 600px;
    margin-bottom: 10px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="middle">

</div>
<div class="sky" id="sky"> 
                        	<div id="w300h200" style="background-color: #190EAA;width:300px;height:200px;"></div>
							<div class="w300h300" id="w300h300" style="position: relative;">
								<div id="bmone2n-24401.1.1.10"></div>
							</div>
							<div class="w300h600" id="w300h600" style="position: relative;background-color:green">
								<div id="bmone2n-24401.1.1.6"></div>
							</div>
						</div>
</div>

＆＃13;

＆＃13;

＆＃13;