航點菜單突出

Question

我一直試圖找到一種方法來hightlight我的菜單圖標，當用戶滾動通過的某一點，我發現使用航點的方式：

<script> 
    var waypoint0 = new Waypoint({ 
     element: document.getElementById('pagetopAnchor'), 
     handler: function() { 

      $('a[href="#pagetop"]').toggleClass('highlighted'); 
     } 
    }) 
    var waypoint1 = new Waypoint({ 
     element: document.getElementById('pagemiddleAnchor'), 
     handler: function() { 
      $('a[href="#pagetop"]').toggleClass('highlighted'); 
      $('a[href="#pagemiddle"]').toggleClass('highlighted'); 
     } 
    }) 
    var waypoint2 = new Waypoint({ 
     element: document.getElementById('pagebottom'), 
     handler: function() { 
      $('a[href="#pagemiddle"]').toggleClass('highlighted'); 
      $('a[href="#pagebottom"]').toggleClass('highlighted'); 
     } 
    })  
</script> 

但我也有一個smoothscroll，所以當我按下菜單圖標時，它會滾動到我想要的位置，但航點標記腳本不會觸發 - 我必須自己滾動一下才能看到它在運行。

你有什麼想法如何解決它？ （所以當我按下菜單圖標時，它會滾動並切換.highlighted類） 我一直在嘗試一段時間，無法達到解決方案。

Answer 1

沒關係。 有時候，解決方案恰到好處。 Waypoints.js有一個「偏移」選項。

對不起！