使用 jQuery Waypoints 插件的粘性导航栏

Question

我已经使用 jQuery Waypoints 插件创建了一个粘性导航，但是当选择一个部分时，我无法让导航选项始终突出显示。

在我的示例中，您将看到菜单项仅在该部分位于范围内时才处于“活动”状态，并且这会根据视口的高度而变化，这是 Waypoints 默认情况下的工作方式：

http://jsfiddle.net/keith/v6vuN/2/ （或全屏版本：http://jsfiddle.net/keith/v6vuN/2/embedded /result/）

我希望菜单项始终突出显示，即使该部分不在范围内。

例如，如果我位于“精选”部分并且“联系人”可见，即使浏览器窗口的高度无法滚动到整个部分，我仍然希望突出显示菜单选项。

这有道理吗？我不想只是在各部分之间或页面底部添加大量填充/边距以使其更长。

Answer 1

在这一部分中，将：更改

// Register each section as a waypoint.
$('#main > .section').waypoint({ offset: '0'});

为：

// Register each section as a waypoint.
$('#main > .section').waypoint({ offset: '50%'});

0 偏移量是距屏幕顶部 0 像素，而 50% 将使其在中间点触发。相应地调整，但 50% 应该这样做。