【问题标题】:Menu ul style change on scroll to div滚动到 div 时菜单 ul 样式更改
【发布时间】:2013-05-17 08:18:02
【问题描述】:

我有一个菜单,其中包含 ul 和下面的框作为内容,当我滚动到第一个框 ul 的样式更改为另一种样式时,当我滚动到第二个框 ul 的样式更改为相同的另一种样式和第一个 ul风格回到原来的风格,就像那样。 问题是当我到达页面末尾时,有空间并且所有 uls 样式都应该返回到它的原始样式但是 jquery 代码的问题是最后一个 ul 样式(对于最后一个框)仍然像我一样在最后一个盒子上。 正如您在http://ge.tt/1yoq2sg/v/0?c 看到的那样,当我到达页面末尾时,菜单中的每个 ul 样式都应该是原始样式,但事实并非如此。 您也可以下载该文件。

【问题讨论】:

    标签: jquery css html scroll


    【解决方案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');  
        }
    
    
      });
    });
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2013-03-25
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2014-06-28
      • 1970-01-01
      相关资源
      最近更新 更多