添加類到菜單項時滾動

Question

我想要的菜單項，看起來像他們，當你通過一個單頁網站

我試圖捕捉每一個元素的位置的某些部分滾動選擇並將其存儲在一個變量，然後在該元素的頂部通過頁面頂部時應用一個類。

Java腳本：

var blockone = Math.abs($("#one").position().top); 
var blocktwo = Math.abs($("#two").position().top); 
var blockthr = Math.abs($("#thr").position().top); 
var blockfou = Math.abs($("#fou").position().top); 
var blockfiv = Math.abs($("#fiv").position().top); 
var blocksix = Math.abs($("#six").position().top); 

    function removeSelected() { 
     $('#menu li').removeClass('selected'); 
    } 

$("#frame").scroll(function() { 
    $("#menu li:nth-child(1)").addClass('selected'); 

    var value = $(this).scrollTop(); 
    if (value < blocktwo){ 
     removeSelected(); 
     $("#menu li:nth-child(1)").addClass('selected'); 
    } else if (value < blockthr){ 
     removeSelected(); 
     $("#menu li:nth-child(2)").addClass('selected'); 
    } else if (value < blockfou){ 
     removeSelected(); 
     $("#menu li:nth-child(3)").addClass('selected'); 

    } else if (value < blockfiv){ 
     removeSelected(); 
     $("#menu li:nth-child(4)").addClass('selected'); 
    } else if (value < blocksix) { 
     removeSelected(); 
     $("#menu li:nth-child(5)").addClass('selected'); 
    } else { 
     removeSelected(); 
     $("#menu li:last-child").addClass('selected'); 
    } 
}); 

我缺少什麼？我在這裏有一個工作jfiddle：http://jsfiddle.net/zer0ruth/pgbef/1/

Answer 1

唯一的問題是，即使在#frame上，它也必須綁定滾動，而它應該在window上。

但是，我看到只有在玩過代碼之後，我纔有一個免費的優化代碼：http://jsfiddle.net/pgbef/15/。

保存您在陣列位置比具有6個變種更好，你可以有一個部分，而不會改變代碼：

var position = []; 

$('.block').each(function(){ 
    position.push(Math.abs($(this).position().top)) 
}) 

那麼你的滾動功能是遠遠短呢！

$(window).scroll(function() { 

    var value = $(this).scrollTop() + $('#menu').height(); 

    $.each(position, function(i){ 
     if(this > value){ 
      $('.selected').removeClass('selected'); 
      $("#menu li").eq(i-1).addClass('selected'); 
      return false; 
     } 
    }) 
});