jquery - 航点菜单突出显示

我一直在尝试找到一种方法来突出显示菜单图标，当用户滚动通过特定点时，我发现了使用Waypoint的方法：

<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>

但是我也有一个平滑滚动，所以当我按下菜单图标时，它会滚动到我想要的点，但是航点脚本不会触发-我必须自己滚动一点才能看到它的运行。

您有任何解决方法的想法吗？ （因此，当我按下菜单图标时，它会滚动并切换.highlighted类）
我已经尝试了一段时间，但无法找到解决方案。

最佳答案

没关系。
有时解决方案就在您的鼻子底下。
Waypoints.js具有“偏移”选项。

抱歉!