jquery - 如何使用 anchor 和菜单事件样式禁用和恢复页面上的 jQuery 路径点

Question

我有一个页面使用 jQuery waypoints 插件以及scrollTo 插件来实现粘性标题等(这里的教程:http://webdesign.tutsplus.com/tutorials/javascript-tutorials/create- a-sticky-navigation-header-using-jquery-waypoints/)。

我几乎一切都运行良好，但我遇到了您可以在子菜单上看到的行为 - 当单击与页面下方的 div 相对应的链接时，页面会根据该 div 滚动，并且菜单会更新与“选定”的类(class)风格。但由于页面滚动经过其他 div，因此当页面滚动过去时，菜单会以动画方式显示每个事件菜单项。我希望能够删除该功能，然后在页面导航到相应的 div 时立即恢复它，以便删除动画事件菜单链接的闪烁。您可以在这里看到我正在谈论的内容(在子菜单中，如果您单击任何链接，例如类车司机或接待员等)。

http://pinnacleahs.com/?page_id=8

我知道waypoints插件中有一个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");

        });
        });

Answer 1

您好，您使用的是here中的最新版本的航路点吗？ ？您需要将航路点选项“连续”定义为“假”

例如:

 $('.div')
  .waypoint(function(direction){
    if (direction === 'down') {
      do stuff
    } //endif
    },{
        offset: '10px',
        continuous: false
  })
  .waypoint(function(direction){
    if (direction === 'up') {
     do stuff
    } //endif
    },{
       offset: '10px',
        continuous: false
    });
});