同じ名前のブロック毎にスクロール時のアクションを追加したい

Question

どうして良いか検索キーワードもわからなくなったので、何かヒントをお願いします。

作りたいもの

完全に同じではないのですが、任天堂の発売スケジュールのようなページを作成したいのですが、詰んでおります。
参考リンク：任天堂/発売スケジュール

上部に年月のリスト、サイドに発売日と曜日という構成で、スクロール時に追従型に変更するclassを追加したいです。

<section class="calender-list">

<div class="calender-area">

<div class="calender-date">
    <ul>
        <li class="current"><a href="#month01">2021.7</a></li>
        <li><a href="#month02">2021.8</a></li>
        <li><a href="#month03">2021.9</a></li>
        <li><a href="#month04">2021.10</a></li>
        <li><a href="#month05">2022.4</a></li>
    </ul>
</div>

<div class="calender-schedule-month" id="month01">
<div class="calender-schedule">
    <div class="schedule-date">
        <div class="schedule-date__in">
            <p class="schedule-date__number">2</p>
            <p class="schedule-date__day">水曜日</p>
        </div>
    </div>
    <div class="schedule-list">
        <div class="schedule-list-box">内容省略</div>
        <div class="schedule-list-box">内容省略</div>
    </div>

</div>
<!-- end .calender-schedule -->

<div class="calender-schedule">
    <div class="schedule-date">
        <div class="schedule-date__in">
            <p class="schedule-date__number">3</p>
            <p class="schedule-date__day">木曜日</p>
        </div>
    </div>
    <div class="schedule-list">
        <div class="schedule-list-box">内容省略</div>
        <div class="schedule-list-box">内容省略</div>
    </div>
</div>
<!-- end .calender-schedule -->

<div class="calender-schedule">
    <div class="schedule-date">
        <div class="schedule-date__in">
            <p class="schedule-date__number">4</p>
            <p class="schedule-date__day">金曜日</p>
        </div>
    </div>
    <div class="schedule-list-box">内容省略</div>
</div>
<!-- end .calender-schedule -->

</div>
<!-- end .calender-schedule-month -->


<div class="calender-schedule-month" id="month02">
<div class="calender-schedule">
    <div class="schedule-date">
        <div class="schedule-date__in">
            <p class="schedule-date__number">2</p>
            <p class="schedule-date__day">水曜日</p>
        </div>
    </div>
    <div class="schedule-list">
        <div class="schedule-list-box">内容省略</div>
        <div class="schedule-list-box">内容省略</div>
    </div>

</div>
<!-- end .calender-schedule -->

<div class="calender-schedule">
    <div class="schedule-date">
        <div class="schedule-date__in">
            <p class="schedule-date__number">3</p>
            <p class="schedule-date__day">木曜日</p>
        </div>
    </div>
    <div class="schedule-list">
        <div class="schedule-list-box">内容省略</div>
        <div class="schedule-list-box">内容省略</div>
    </div>
</div>
<!-- end .calender-schedule -->

<div class="calender-schedule">
    <div class="schedule-date">
        <div class="schedule-date__in">
            <p class="schedule-date__number">4</p>
            <p class="schedule-date__day">金曜日</p>
        </div>
    </div>
    <div class="schedule-list-box">内容省略</div>
</div>
<!-- end .calender-schedule -->

</div>
<!-- end .calender-schedule-month -->

</div>


</section>

.calender-date.is-fixed{
            position:fixed;
            top:0;
            left: 0;
            right:0;
            z-index:99;
        }
.calender-date.current{font-weight:bold;}

.calender-schedule .schedule-date{
            width:20%;
            height:100%;
            max-width:85px;
            position:absolute;
            display:block;
}
.calender-schedule .schedule-date.is-fixed{
position:fixed;
                top:30px;
                z-index:99;
}

$(function(){
  var win = $(window);
  var month = $('.calender-date');
  var monthPosi = $('.calender-date').offset().top;
  win.on('scroll',function(){
    var scr = win.scrollTop();
    if(scr > monthPosi){
      month.addClass('is-fixed');
    }else{
      month.removeClass('is-fixed');
    }
  });
});

$(function(){
  var win = $(window);
  win.on('scroll',function(){
      $('.calender-schedule').each(function(index){
    var scr = win.scrollTop();
    var dayPosi = $(this).offset().top;
    var endPosi = $(this).next().offset().top; ←ここにエラーが出ているのですが、何が問題になりますか？
        if(scr > dayPosi  &&  scr < endPosi){
          $(this).children('.schedule-date').addClass('is-fixed');
        }else{
          $(this).children('.schedule-date').removeClass('is-fixed');
        }
 });
});
});

jqueryは色々なサイトを見ながら書いたのですが、機能しているのは一部のみです。

上記でできていること

・スクロールし、月表示のリストを追従させる
・そのまま日付も一緒に追従にする
・次の日付ブロックが来たら次の日付のみが追従する

できていないこと

・月が変わるブロックに入ると（.calender-schedule-month）、日付追従ができない
・最後の日付（.calender-date codeだと4日金曜日）に追従させるためのclassが追加できていない

ソースの内容へのご指摘、検索方法など、なんでも良いのでヒントをいただけると大変助かります。
よろしくお願いします。

Comments

[m.ts10806]

要はこういう機能？
https://getbootstrap.jp/docs/5.0/components/scrollspy/
https://materializecss.com/scrollspy.html
ちょっと違うか

[m.ts10806]

こっちのほうが近いですかね。
https://materializecss.com/pushpin.html
合わせ技と言えなくもないかも

[M.Takeshita]

参考リンクありがとうございます！使える箇所があるか、見てみます！

月の表示の方は、いただいたリンクのscrollspyができるところを目指したいです！
でも記述したjsにはまだそこまで到達できておらず。。

参考リンクの任天堂のページでいう、日付の部分もこれらと同じような考え方になるのでしょうか...?

[m.ts10806]

pushpinのほうに近いと思います。
「ここからここまでは青ね」というエリアを指定してるので。
提示したのはCSSフレームワークなので、全部自前でやるのではなくこちらをとりあえず取り入れて改修するのはありとは思います。