前提・実現したいこと
https://www.goodfind.jp/2019/seminar/date
こちらのページの日付部分のような、スクロールしていくと次の日の日付に切り替わるスクロールを作っています。
発生している問題
一番上のスクロールはちゃんと出来ているのですが、それ以降スクロールするとエラーになってしまいます。
エラーメッセージ
else if (next.offset().top - dateHeight - offset2 >= window.pageYOffset) {
↓この行で下記メッセージが出ています
Uncaught TypeError: Cannot read property 'top' of undefined
該当のソースコード
javascript(jQuery)
ソースコード
<script> $(window).on('load', function(){ var dateFloat = function () { $(".p-event__listpage--right").each(function (i) { var next = $(".p-event__listpage--right:eq(" + (i + 1) + ")"); var dateHeight = $(this).find('.date').height(); var offset1 = 75; var offset2 = 84; if ($(this).offset().top - offset1 >= window.pageYOffset) { $(this).find(".date").removeClass("is-bottom"); $(this).find(".date").removeClass("is-midst"); } else if (next.offset().top - dateHeight - offset2 >= window.pageYOffset) { $(this).find(".date").removeClass("is-bottom"); $(this).find(".date").addClass("is-midst"); } else { $(this).find(".date").removeClass("is-midst"); $(this).find(".date").addClass("is-bottom"); } }); } $(window).scroll(dateFloat); }); </script>
CSS
.p-event__listpage--right { position: relative; } .date { position: absolute; } .is-midst { position: fixed!important; top: 10px; } .is-bottom { bottom: 30px; }
試したこと
エラー部分の値がちゃんと取得されているか確かめたところ、値は0でした。
親にはposition:relative;を指定しています。