根據頁面上的位置更改列表項目的類別

Question

在我的site上，我有一個單頁導航菜單。當我點擊鏈接時，頁面向下滾動到相應的部分。 我使用的是magicline jquery，它將懸停列表項的類設置爲「當前」，以實現移動的下劃線效果。

但是，我還需要在用戶查看頁面的相應部分時將li的類設置爲「當前」。我只是做一個點擊事件，但是當用戶向下滾動而不點擊或者向上或向下滾動到另一個部分時，這當然不起作用。

這是我到目前爲止所嘗試的，沒有成功。有任何想法嗎？

<div class="navbar navbar-fixed-top ogNav"> 
    <div class="navbar-inner"> 
    <div class="container-fluid"> 

     <a class="brand" href="index.php">Kyle Hagler</a> 
     <div class="nav-collapse collapse nav-wrap"> 


     <ul class="nav pull-right" id="topnav"> 
      <li id="homeLink" class="current"><a id="home" href="javascript:;" class="first">Home</a></li> 
      <li id="workLink"><a href="#recent">Work</a></li> 
      <li id="aboutLink"><a href="#about">About</a></li> 
      <li id="contactLink"><a class="last" href="#contact">Contact</a></li> 
     </ul> 
     </div><!--/.nav-collapse --> 
    </div> 
    </div> 
</div> 


    var recent = $('#recent').offset().top; // Get the position of the recent section 
    var about = $('#about').offset().top; // Get the position of the about section 
    var contact = $('#contact').offset().top; // Get the position of the contact section 

    $(window).scroll(function(){ // Window on scroll 
      var scroll = $(window).scrollTop(); // Get the position of the scroll 

      if(scroll > recent) { 
       $('#topnav li').removeClass(); 
       $('#workLink').addClass('current'); 
      } 

      if(scroll > about) { 
       $('#topnav li').removeClass(); 
       $('#aboutLink').addClass('current'); 
      } 

      if(scroll > contact) { // if scroll is greater than contact position then modify the menu 
       $('#topnav li').removeClass(); 
       $('#contactLink').addClass('current'); 
      } 
     }); 

Answer 1

看一看引導Scrollspy http://twitter.github.io/bootstrap/javascript.html#scrollspy，也許你能找到一些其他的腳本，可能對您有用。

Answer 2

也許是一個調整它的setInterval。在該功能中，您將測試您的觀看距離最近的點。

Answer 3

您可以輕鬆地做到這一點這樣

var about = $('#about').offset().top; // Get the position of the about section 
var contact = $('#contact').offset().top; // Get the position of the contact section 

$(window).scroll(function(){ // Window on scroll 
    var scroll = $(window).scrollTop(); // Get the position of the scroll 
    if(scroll > contact) { // if scroll is greater than contact position then modify the menu 
     // Change menu to contact 
    if(scroll > about) { 
     // Change menu to about 
    } 
});