jquery - 滚动到 div 时菜单 ul 样式更改

Question

我有一个菜单，它下面有 ul 和框作为内容，当我滚动到第一个框时，ul 的样式更改为另一种样式，当我滚动到第二个框时，ul 的样式更改为相同的另一种样式，第一个 ul风格回到原来的风格，就像那样。问题是当我到达页面末尾时，有空间并且所有 uls 样式都应该返回到它的原始样式但是 jquery 代码的问题是最后一个 ul 样式(对于最后一个框)仍然像我一样在最后一个盒子上。正如你在这里看到的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');  
    }


  });
});