jquery - JQuery を使用して、ページがスクロールされるのとまったく同じように要素を配置する

Question

ヘッダーとトップメニューバーの下のページの右側にあるdivに、狭いが長い画像カルーセルがあります。私のページには多くのコンテンツがあり、画像の高さよりもかなり長い場合、画像を次のように配置したいと考えています。

• 画像の上部がウィンドウの上部から 10 ピクセルになるまでの、ページ上の相対位置または絶対位置
• メインページのコンテンツが読まれても表示され続けるように固定位置。
• ページの下部に達したときの相対位置または絶対位置。div は、ページの残りの部分に合わせてフッターの上の位置を占めます。div がフッターと衝突しないように、大きなギャップがあってはなりません。

たとえば、位置変数を見て多くのバリエーションを試しました：

jQuery(document).ready(function(){  
     $(window).scroll(function () {  

 var y = $('#rightbackground').offset().top - $(window).scrollTop();
 var z = $(document).Height - $('#rightbackground').offset().top - $('#rightbackground').Height();

   if (y < 10 && z > 0) {$('#rightbackground').removeClass('content-stay2');  
            $('#rightbackground').addClass('content-scroll2');  

        } 

        else {  
            $('#rightbackground').addClass('content-stay2');  
            $('#rightbackground').removeClass('content-scroll2');  
        }  
    });       

}); 

しかし、私が望む効果を得ることができません。

HTML（コメントから）：

<div id="rightbackgroundcontainer"> 
  <div id="rightbackground"> 
    <div id="mainright"> 
      <div id="comslider_in_point_53815"></div> 
<script type="text/javascript"> 
  var oCOMScript53815=document.createElement('script');     
  oCOMScript53815.src="comslider53815/comsliderd.js?timestamp=1381081498"; 
  oCOMScript53815.type='text/javascript'; 
  document.getElementsByTagName("head").item(0).appendChild(oCOMScript53815); 
</script> 
      <div id="bottomrighttxt"> 
        <h2><span class="greytext">Industry News</span></h2> 
      </div>
    </div> 
  </div> 
</div>

CSS（コメントからも）：

.content-stay2 {position: relative; } 
.content-scroll2 { 
  position: fixed; 
  float: left; 
  margin-left: 642px; 
  margin-top: -300px;
}

ありがとう