我jQuery項目符號菜單中的功能障礙

Question

我不明白爲什麼我的代碼無法正常工作我在我的頁面上創建了一個工作不正常的項目符號菜單。子彈不對應每個部分。例如，最後一個項目符號不對應於「聯繫人」部分（最後一部分）。

Bullet 1 => Home - "Bullet 1" title 
Bullet 2 => "Bullet 2" title 
Bullet 3 => "Bullet 3" title 
Bullet 4 => "Bullet 4" title 

當我滾動子彈不對應的頁面，當我點擊一個子彈是一樣的:-(

PS：我不能使用$（窗口）或$ （ 'HTML，身體'），而不是$（ '＃頁'）因爲我的網頁結構。

http://jsfiddle.net/Xroad/FtaL3/2/

我不爲什麼已瞭解我的代碼不正常，任何想法？

$(function(){ 

    var sections = []; 
    var id = false; 
    var $navbar = $('.navbar'); 
    var $navbara = $('a', $navbar); 

    $navbara.click(function(e){ 
     $('#page').animate({ 
      scrollTop: $($(this).attr('href')).offset().top 
     }); 
    }); 

    $navbara.each(function(){ 
     sections.push($($(this).attr('href'))); 
    }); 

    $('#page').scroll(function(e){ 
     var scrollTop = $(this).scrollTop() + ($('#page').height()/2) 
     for(var i in sections){ 
      var section = sections[i]; 
      if (scrollTop > section.offset().top) { 
       scrolled_id = section.attr('id'); 
      } 
     } 
     if (scrolled_id !== id) { 
      id = scrolled_id 
      $navbara.removeClass('current'); 
      $('a[href="#' + id + '"]', $navbar).addClass('current'); 
     } 
    }); 

}); 

Answer 1

您正在使用$(selector).offset().top來確定滾動應作出哪些位置，但請記住，這是動態值，綁定到窗口，封口元件是你的窗口頂部邊框目前，該小价值將會是。

要解決此問題，您應該考慮該值。

Answer to similar question解決這樣的：

var dest = 0; 
if ($(this.hash).offset().top > $(document).height() - $(window).height()) { 
    dest = $(document).height() - $(window).height(); 
} 
else { 
    dest = $(this.hash).offset().top; 
} 
$('#page').animate({ 
    scrollTop: $(dest).offset().top 
}); 

我已經更新了自己的代碼http://jsfiddle.net/FtaL3/4/

只是要注意的，還有更多的問題與您的代碼，並有更多的東西，這不是在那裏工作。

PS：我寧願使用Twitter Bootstrap庫，並會使用Scrollspy來制定該菜單。