特定の要素内だけスクロール追従させるようにしたい。

Question

googleoptimizeでのABテストをしたいと思い開発中でしす。

その際、jQueryを使用し、特定の要素を指定した範囲内のみ追従させたいと考えています。

###実現したい事
<h2 id="for-the-first-time">【第１位】１番おすすめ！らく楽スタイルウォーターサーバーsmartプラス </h2>の部分が画面のトップに来たら上部で固定させ、
<div class=“second-time-list”>の部分まで追従させて、そこで追従を終了させたいです。

###現状
それぞれのtopの値は取れているのはデバッグで確認済みです。
おかしな点がどこかご教授いただきたいです。
宜しくお願いいたします。

<div class=“first-time-list”>
 <h2 id="for-the-first-time">【第１位】１番おすすめ！らく楽スタイルウォーターサーバーsmartプラス </h2>
 <p><img class="aligncenter wp-image-21629" src="https://mizunome-ru.jp/wp-content/uploads/2018/07/cosmo-water-image2.jpg" alt="コスモウォーターのらく楽スタイルウォーターサーバーsmartプラス" width="750" height="444" srcset="https://mizunome-ru.jp/wp-content/uploads/2018/07/cosmo-water-image2.jpg 1300w, https://mizunome-ru.jp/wp-content/uploads/2018/07/cosmo-water-image2-300x178.jpg 300w, https://mizunome-ru.jp/wp-content/uploads/2018/07/cosmo-water-image2-768x455.jpg 768w, https://mizunome-ru.jp/wp-content/uploads/2018/07/cosmo-water-image2-1024x607.jpg 1024w, https://mizunome-ru.jp/wp-content/uploads/2018/07/cosmo-water-image2-980x580.jpg 980w, https://mizunome-ru.jp/wp-content/uploads/2018/07/cosmo-water-image2-304x180.jpg 304w, https://mizunome-ru.jp/wp-content/uploads/2018/07/cosmo-water-image2-282x167.jpg 282w" sizes="(max-width: 750px) 100vw, 750px" /></p>
<table>
<tbody>
 <tr>
  <td style="background-color: #f5f4f5; width: 194.552px;">サイズ</td>
  <td style="width: 543.448px;">幅30cm／奥行34cm／高さ110cm</td>
 </tr>
 <tr>
  <td style="background-color: #f5f4f5; width: 194.552px;">水の料金</td>
  <td style="width: 543.448px;">79円（500ml換算）</td>
</tr>
</tbody>
</table>
</div>
<div class=“second-time-list”>
<h2 id="stick-to-the-water">【第２位】初めて使う人向け！サントリーウォーターサーバー</h2>
<p><img class="aligncenter size-full wp-image-26274" src="https://mizunome-ru.jp/wp-content/uploads/2019/05/item-suntory-img1.png" alt="サントリーウォーターサーバー" width="917" height="580" srcset="https://mizunome-ru.jp/wp-content/uploads/2019/05/item-suntory-img1.png 917w, https://mizunome-ru.jp/wp-content/uploads/2019/05/item-suntory-img1-300x190.png 300w, https://mizunome-ru.jp/wp-content/uploads/2019/05/item-suntory-img1-768x486.png 768w, https://mizunome-ru.jp/wp-content/uploads/2019/05/item-suntory-img1-304x192.png 304w, https://mizunome-ru.jp/wp-content/uploads/2019/05/item-suntory-img1-282x178.png 282w, https://mizunome-ru.jp/wp-content/uploads/2019/05/item-suntory-img1-97x62.png 97w" sizes="(max-width: 917px) 100vw, 917px" /></p>
<table>
<tbody>
<tr>
<td style="background-color: #f5f4f5; width: 192.521px;">サイズ</td>
<td style="width: 545.479px;">幅37cm／奥行45cm／高さ124cm</td>
</tr>
</tbody>
</table>
</div>

var memuPosi = jQuery("#for-the-first-time").offset().top; //要素（#for-the-first-time）の初期位置情報です。
var menuTopMargin = 10; //fixed時のトップマージン値。
var targetScrollValue = memuPosi.top - menuTopMargin; //position切替の境となるスクロール値

var second = jQuery("#stick-to-the-water").offset().top; //要素(#stick-to-the-water)の初期位置情報です。
var secondScrollValue = second - menuTopMargin; 

jQuery(window).scroll(function() {
    //var wScrollvalue = $('html,body').scrollTop();
    var wScrollvalue = jQuery(window).scrollTop();
    if(wScrollvalue > targetScrollValue && wScrollvalue < secondScrollValue){
        jQuery("#for-the-first-time").css({
            position: "fixed",
            top: menuTopMargin
            });
        }
  else {
        jQuery("#for-the-first-time").css({
            position: "static"
          
        });
        }
});

Answer 1

//var memuPosi = jQuery("#for-the-first-time").offset().top;
var memuPosi = jQuery("#for-the-first-time").offset();