jQuery突出顯示菜單項當滾動部分

我想突出顯示菜單項當您向下滾動到該部分。的突出作品，但由於某些原因，當滾動到其他部分jQuery突出顯示菜單項當滾動部分

這是我的菜單看起來像我不能去掉高亮顯示：

<div id="navbar"> 
      <ul class="nav navbar-nav"> 
      <li class="active"><a data-id="home" href="#home">Home</a></li> 
      <li class="navbar-right"><a data-id="cont" href="#contact">Contact</a></li> 
      <li class="navbar-right"><a data-id="exp" href="#exp">Expertise</a></li> 
      <li class="navbar-right"><a data-id="wie2" href="#wie2">Wie</a></li> 
      </ul> 
</div>

在HTML中的每一個地方我用了一節ID錨我加class="section"

這是我的jQuery：

jQuery(window).scroll(function() { 
     var position = jQuery(this).scrollTop(); 

     jQuery('.section').each(function() { 
      var target = jQuery(this).offset().top; 

      var id = jQuery(this).attr('id'); 

      if (position >= target) { 
       jQuery('#navbar>ul>li>a').removeClass('clicked'); 
       jQuery('#navbar ul li a[data-id=' + id + ']').addClass('clicked'); 
      } 
     }); 
});

任何人有任何想法，爲什麼班級獲得每次都刪除？因爲我註釋掉jQuery('#navbar>ul>li>a').removeClass('clicked');，因爲它很棒。這些類正在被正確添加。但是，刪除它們不起作用:(

來源

2016-04-29 Frank Lucas

我想是因爲：#navbar>ul>li>a是不一樣的#navbar ul li a

首先是試圖找到直接<ul>孩子#navbar，二是要求找到一個<ul>孩子（任何級別）下#navbar和同樣適用於選擇的其餘部分。

看一看here

子組合子（E> F）可以被看作是一個更具體的形成後代組合子（E F）的，因爲它僅選擇第一級後代。

來源

2016-04-29 13:44:22

**不修復該問題**。 –

那麼什麼沒有解決這個問題！？你能告訴我你做了什麼！ –

您的意思是說這不起作用： jQuery（'＃navbar ul li a'）。removeClass（'clicked'）; –

我很難說不清楚是什麼問題不能夠通過實際的代碼來掏，但你可以嘗試更新該行：

jQuery('#navbar>ul>li>a').removeClass('clicked');

到：

jQuery('#navbar').find('clicked').removeClass('clicked');

這樣，您肯定會在重新分配之前從僅具有「點擊」類的鏈接中刪除「已點擊」類。

我也建議檢查bootstrap的滾動功能。這聽起來像是你正在努力實現的。你可以嘗試實現它，或者挖掘他們的代碼，看看他們如何接近它並學習新的東西。

http://getbootstrap.com/javascript/#scrollspy

希望這有助於！

來源

2016-04-29 13:52:05

還沒有測試這一點，但我認爲這應該工作

jQuery(window).scroll(function() { 
     var position = jQuery(this).scrollTop(); 

     jQuery('.section').each(function() { 
      var target = jQuery(this).offset().top; 

      var id = jQuery(this).attr('id'); 
      jQuery('#navbar ul li a[data-id=' + id + ']').removeClass('clicked'); 
      if (position >= target) { 
       jQuery('#navbar ul li a[data-id=' + id + ']').addClass('clicked'); 
      } 
     }); 

});

來源

2016-04-29 13:58:45 Koen

youp就是這樣！好的 –

jQuery突出顯示菜單項當滾動部分

回答

相關問題