jquery - div へのスクロール時のメニュー ul スタイルの変更

Question

コンテンツとして ul とその下にあるボックスを含むメニューがあり、最初のボックスにスクロールすると ul のスタイルが別のスタイルに変更され、2 番目のボックスにスクロールすると ul のスタイルが同じ別のスタイルに変更され、最初の ul スタイルがに戻りますそれはオリジナルのスタイルです。問題は、ページの最後に到達したとき、スペースがあり、すべてのulsスタイルが元のスタイルに戻るはずですが、最後のulスタイル(最後のボックスの)がまだ私のままであるというjqueryコードの問題です最後の箱に。ここhttp://ge.tt/1yoq2sg/v/0?cでわかるように、ページの最後に到達すると、メニューのすべての ul スタイルが元のスタイルである必要がありますが、そうではありません。ファイルをダウンロードすることもできます。

Answer 1

endpoint最終的な div のオフセットとその div の高さに設定される変数を追加しました。これを超えてページがスクロールされると、menutext2クラスが削除されます。

$(function(){

  var offsets = [],
      menuText = $('#menu .menuText'),
      endpoint;

  $("div.contentDiv").each( function(i, div) {
      if(i==$("div.contentDiv").length-1){endpoint=$(div).offset().top+$(div).outerHeight();}
      offsets.push({ id: div.id, offset: $(div).offset().top - 60});
  });

  $(window).scroll(function(e) {
    var start = $(this).scrollTop();
    var end = $(this).scrollTop();
    for ( var div = 0; div < offsets.length; div++ ) {
      if ( start > offsets[div].offset ) { 
        menuText.removeClass('menutext2').addClass('menutext');  

        menuText.filter('[linkId="'+offsets[div].id+'"]').addClass('menutext2').removeClass('menutext');
        }
    }

    if ( start === 0 || $(this).scrollTop()>endpoint) {
    menuText.removeClass('menutext2').addClass('menutext');  
    }


  });
});