當使用基於當前視圖的scrollto時突出顯示活動鏈接

Question

我有一個網站是一個頁面，用戶使用scrollto jquery插件的鏈接導航到每個部分。

我的問題是：我想顯示主菜單中的活動鏈接。所以如果你滾動到聯繫表格，聯繫鏈接會突出顯示。現在我可以在jquery中通過點擊後添加類來實現。如果這樣做，如果用戶要手動滾動到另一部分，聯繫鏈接仍然是活動的，這將是不正確的和誤導。

所以我的想法是以某種方式確定哪個div id當前在視圖中。儘管如此，我還是不太明白該怎麼做。有任何想法嗎？

Answer 1

這應該爲你添加手動滾動控制裝置：

$(function(){ 
    var sections = {}, 
     _height = $(window).height(), 
     i  = 0; 

    // Grab positions of our sections 
    $('.section').each(function(){ 
     sections[this.name] = $(this).offset().top; 
    }); 

    $(document).scroll(function(){ 
     var pos = $(this).scrollTop(); 

     // Look in the sections object and see if any section is viewable on the screen. 
     // If two are viewable, the lower one will be the active one. 
     for(i in sections){ 
      if(sections[i] > pos && sections[i] < pos + _height){ 
       $('a').removeClass('active'); 
       $('#nav_' + i).addClass('active'); 
      } 
     } 
    }); 
}); 

演示：http://jsfiddle.net/x3V6Y/