滚动到div的菜单ul样式更改 [英] Menu ul style change on scroll to div

问题描述

我有一个带有ul的菜单和下面的框作为内容，当我滚动到第一个框时，ul的样式转换为另一个样式，当我滚动到第二个框时，ul的样式转换为另一个样式，第一个ul风格回归它的原始风格，就像那样。
问题是，当我到达页面末尾，有空间，那里的所有uls样式应该返回到它的原始样式，但与最后ul样式（最后一个框）jquery代码的问题仍然因为我在最后一个盒子上。
正如你在这里可以看到 http://ge.tt/1yoq2sg/v/0？当我到达页面的末尾时，菜单中的每个ul样式都应该是原始样式，但它不是。
您也可以下载该文件。

I have a menu with ul's and boxes under it as content, and when I scroll to the first box ul's style change to another style, when I scroll to the second box ul's style change to the same another style and the first ul style return to it's original style and like that. The problem is when I arrive to the end of the page, there's space and there ALL the uls styles should return to it's original style but the problem with the jquery code that the last ul style(for the last box) still as I'm on the last box. As you can see here http://ge.tt/1yoq2sg/v/0?c when I arrive to the end of the page every ul style in the menu should be as the original style but it's not. You can also download the file.

推荐答案

我添加了一个变量 endpoint ，它被设置为最终div的偏移量加上divs的高度，当页面滚动超出此范围时， menutext2 类被移除。

I've added an variable endpoint which is set to the offset of the final div plus that divs height, when the page is scrolled beyond this the menutext2 class is removed.

$(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');  
    }


  });
});

这篇关于滚动到div的菜单ul样式更改的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！