Question

当用户滚动以通过某个点时，我一直试图找到一种方法来高亮显示菜单图标，我找到了使用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>

但是我也有一个smoothscroll，所以当我按下菜单图标时它会滚动到我想要的点，但是waypoints脚本没有触发 - 我必须自己滚动一点才能看到它在运行。< / p>

您有任何想法如何修复它？（所以当我按下菜单图标时，它会滚动并切换.highlighted类）我已经尝试了一段时间，无法达成解决方案。

Answer 1

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

抱歉！

Waypoints菜单突出显示

1 个答案: