1

我在我的网站上使用了两个 jQuery 插件来完成两件事:

  1. jQuery Waypoints - 所以当我向下滚动页面并到达每个部分时,相应菜单链接下方的黑条变为白色:

    在此处输入图像描述

    1. jQuery ScrollTo - 当您单击主菜单链接之一时,我正在使用它来平滑部分之间的滚动。

我的问题是,当我手动向下滚动页面时,适当的选定类会通过 Waypoints 添加到主菜单链接(如上图所示将栏变为白色)。但是当我单击主菜单上的实际链接时,它不起作用,直到我手动向下滚动一点。我相信这两个脚本都有一些偏移选项可以使其正常工作,但我无法弄清楚。我设置了一个 jsFiddle ( http://jsfiddle.net/j5Guz/ )。这是我当前的 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() }
        }
      );
    });

});
4

1 回答 1

0

jsFiddle 似乎没有完全工作(向下滚动时导航栏没有保持在视图中)但我遇到了同样的问题,导航栏转换与手动滚动一起工作,但是当点击时,不要完全点击正确的位置。

我的解决方案是使用 Firebug 检查导航栏元素,然后查看Layout选项卡,该选项卡将显示导航栏的确切总像素高度,包括填充和边距。然后您可以设置offset以匹配该总像素高度。例如,如果导航栏高度为 85 像素,那么在我的设置中,

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

在这里,一次data-offset是正确的,然后单击导航栏链接将到达页面上的正确位置,以及更改导航栏中突出显示的部分。

于 2013-09-19T13:26:59.517 回答