我有一个页面使用 jQuery waypoints 插件以及 scrollTo 插件来实现粘性标题等(这里的教程:http://webdesign.tutsplus.com/tutorials/javascript-tutorials/create-a-sticky -navigation-header-using-jquery-waypoints/)。
我几乎所有东西都运行良好,但是我遇到了您可以在子菜单上看到的行为 - 当单击与页面下方 div 对应的链接时,页面会根据 div 滚动,并且菜单会更新为 '选择'类风格。但是因为页面滚动过其他 div,所以当页面滚动过时,菜单会通过每个活动菜单项进行动画处理。我希望能够删除该功能,然后在页面导航到相应的 div 后立即恢复它,以便删除此动画活动菜单链接的闪烁。您可以在这里看到我在说什么(在子菜单中,如果您单击任何链接,例如班车司机或接待员等)。
http://pinnacleahs.com/?page_id=8
我知道航点插件中有一个 remove() 方法,但我不确定如何恢复它。此外,也许还有另一种方法可以达到同样的目的。
我的功能如下所示:
$(function() {
// Do our DOM lookups beforehand
var nav_container = $(".navContainer");
var nav = $(".navStickyHolder");
nav_container.waypoint({
handler: function(event, direction) {
nav.toggleClass('sticky', direction=='down');
if (direction == 'down'){
nav_container.css({ 'height':nav.outerHeight() });
} else {
nav_container.css({ 'height':'auto' });
}
},
offset: 177
});
var sections = $(".servicePanel");
var navigation_links = $(".servicesNavigation li a");
sections.waypoint({
handler: function(event, direction) {
var active_section;
active_section = $(this);
if (direction === "up") active_section = active_section.prev();
var active_link = $('.servicesNavigation li a[href="#' + active_section.attr("id") + '"]');
navigation_links.removeClass("selected");
active_link.addClass("selected");
}, offset: 295
})
navigation_links.click( function(event) {
$.scrollTo(
$(this).attr("href"),
{
duration: 300,
offset: { 'left':0, 'top': -240 }
}
);
navigation_links.removeClass("selected");
$(this).addClass("selected");
});
});