在頁面上向下滾動時突出顯示導航點

Question

將嘗試解釋此:) 我有一個滾動到頁面上不同錨點的導航。當用戶在其中一個錨點上時，導航顯示一個活動鏈接。

現在我認爲，如果用戶可以說在頁面的頂部，點擊將頁面移動到頁面底部的鏈接，同時滾動它們之間的每個鏈接，當滾動通過時突出顯示。像一盞紅綠燈。

我有這個jquery的時刻，但它的唯一添加/刪除類點擊鏈接。 關於如何繼續下去的想法？

$(document).ready(function($){ 
    $('a').click(function(){ 
     $('html, body').animate({ 
      scrollTop: $($.attr(this, 'href')).offset().top 
     }, 500); 
     return false; 
    }); 

     $('.navigation ul li a').click(function() { 
     $('.navigation ul li a').removeClass('active'); 
      $(this).addClass('active'); 
    }); 
}); 

我還創建了一個JSfiddle

Answer 1

編輯：修改了代碼，獲得更好的性能。

我做了一個的jsfiddle在這裏工作，我加入

var parPosition = []; 
     $('.par').each(function() { 
      parPosition.push($(this).offset().top); 
     }); 

     $(document).on('scroll', function() { 
      var position = $(document).scrollTop(), 
       index; 

      for (var i=0; i<parPosition.length; i++) { 
       if (position <= parPosition[i]) { 
        index = i; 
        break; 
       } 
      } 

      $('.navigation ul li a') 
       .removeClass('active') 
       .eq(index) 
       .addClass('active'); 
     }); 

正如你所看到的，我添加了類「相提並論」的所有段落。 JSFiddle