2013-05-16 22 views
1

我有一個菜單,包含ul和它下面的框作爲內容,當我滾動到第一個框時,ul的樣式更改爲另一種樣式,當我滾動到第二個框時,ul的樣式更改爲相同的另一種風格和第一種ul風格返回到它的原始風格,就像那樣。 問題是,當我到達頁面的末尾,有空間,那裏所有的uls樣式應該返回到它的原始樣式,但與最後ul樣式(最後一個盒子)jquery代碼的問題仍然是我'米在最後一個盒子。 正如你在這裏看到的http://ge.tt/1yoq2sg/v/0?c當我到達頁面的結尾時,菜單中的每個ul樣式應該是原始樣式,但它不是。 您也可以下載該文件。滾動到div的菜單ul樣式更改

回答

0

我已經添加了一個變量endpoint,它被設置爲最終div的偏移量加上divs的高度,當頁面滾動超過此範圍時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'); 
    } 


    }); 
});