修复jQuery ScrollTo和jQuery航路点的偏移量以使其正常工作_Jquery_Scrollto_Jquery Waypoints

修复jQuery ScrollTo和jQuery航路点的偏移量以使其正常工作

jquery

修复jQuery ScrollTo和jQuery航路点的偏移量以使其正常工作,jquery,scrollto,jquery-waypoints,Jquery,Scrollto,Jquery Waypoints,我在我的站点上使用两个jQuery插件来完成两件事： -这样，当我向下滚动页面并进入每个部分时，相应菜单链接下方的黑条将变为白色： -当您单击一个主菜单链接时，我使用此选项在各个部分之间平滑滚动我的问题是，当我手动向下滚动页面时，相应的选定类会通过航路点添加到主菜单链接（如上图所示，将下方的栏变成白色）。但是，当我点击主菜单上的实际链接时，它不会工作，直到我手动向下滚动一点。这两个脚本都有一些偏移选项，我相信可以使其正常工作，但我无法理解。我设置了一个jsFiddle（）。以下是我当前的j

我在我的站点上使用两个jQuery插件来完成两件事：

-这样，当我向下滚动页面并进入每个部分时，相应菜单链接下方的黑条将变为白色：

-当您单击一个主菜单链接时，我使用此选项在各个部分之间平滑滚动

我的问题是，当我手动向下滚动页面时，相应的选定类会通过航路点添加到主菜单链接（如上图所示，将下方的栏变成白色）。但是，当我点击主菜单上的实际链接时，它不会工作，直到我手动向下滚动一点。这两个脚本都有一些偏移选项，我相信可以使其正常工作，但我无法理解。我设置了一个jsFiddle（）。以下是我当前的jquery：

$(function() {                    
  var sections = $('section');
  var navigation_links = $('nav a');
  sections.waypoint({
    handler: function(event, direction) {
        var active_section;
        active_section = $(this);
        if (direction === "up") active_section = active_section.prev();
        var active_link = $('nav a[href="#' + active_section.attr("id") + '"]');
        navigation_links.removeClass("selected");
        active_link.addClass("selected");
    },
    offset: '35%'
  });

    navigation_links.click( function(event) {
      $.scrollTo(
        $(this).attr("href"),
        {
          duration: 500,
          offset: { 'left':0, 'top':-0.15*$(window).height() }
        }
      );
    });

});

JSFIDLE似乎没有完全工作（向下滚动时导航栏不在视图中），但我遇到了完全相同的问题，导航栏转换与手动滚动一起工作，但单击时，没有完全命中正确的位置

我的解决方案是使用Firebug检查导航栏元素，然后查看

布局

选项卡，该选项卡将显示导航栏的确切总像素高度，包括填充和边距。然后，您可以设置

偏移量

，以匹配该总像素高度。e、 g.如果导航栏高度为85像素，则在设置中

<body id="the-page" data-target=".navbar" data-offset="85" data-spy="scroll">

在这里，一旦

数据偏移量

正确，然后单击导航栏链接将到达页面上的正确位置，并更改导航栏中突出显示的部分。

可能无关紧要，但

handler:function（event，direction）

是旧的1.x处理程序签名，但您的小提琴使用的是Waypoints 2.0.2，它只使用：

处理程序：函数（方向）

。