Sticky Nav Bar使用jQuery Waypoints插件

时间:2011-04-14 18:11:08

标签: jquery jquery-plugins menu jquery-waypoints

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

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

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

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

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

这有意义吗?我不仅仅是在页面底部或页面底部添加大量填充/边距以使其更长。

1 个答案:

答案 0 :(得分:2)

在这部分中,更改:

// 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%应该这样做。