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

问题描述

| 我已经使用jQuery Waypoints插件创建了一个粘性导航，但是当选择一个部分时，我很难使导航选项始终突出显示。 在我的示例中，您将看到该部分在范围内时菜单项仅处于“活动”状态，并且会根据视口的高度而改变，这是Waypoint在默认情况下应该起作用的方式： http://jsfiddle.net/keith/v6vuN/2/ （或全屏版本：http://jsfiddle.net/keith/v6vuN/2/embedded/result/） 我希望菜单项始终突出显示，即使该部分不在范围内。 例如，如果我在“功能”部分中并且可见“联系人”，即使浏览器窗口的高度无法滚动，我仍然希望菜单选项突出显示到整个部分。 那有意义吗？我宁愿不只是在各节之间或在页面底部添加很多填充/边距，以使其更长。     

解决方法

在这一部分中，更改：

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

至：

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

0偏移量是从屏幕顶部开始的0px，而50％的偏移量将使其在屏幕中点发光。进行相应的调整，但50％应该这样做。