通过单击向上滚动时，jQuery Waypoints粘性导航是1px关闭

我接近用Waypoints撕掉我的头发。 首先，我远没有体验过javascript。 我正在使用Waypoints来1）将导航到某个点的屏幕顶部（这很好）和2），在到达某些部分时突出显示导航项。 除非您单击需要航点指示方向的导航项目，例如单击“特殊值”然后单击“目标”，否则一切都会正常工作。 您会注意到航点似乎是一个像素关闭，“exception值”仍然突出显示。 如果向上滚动像素，“目标”最终会突出显示。 这是复制此行为的唯一方法…单击向下滚动的导航项工作正常。 这是我的JS： http ： //jsfiddle.net/TreUd/ 。 以下是它实施的网站： http ： //ifb.thepinkrobot.com/ 。 感谢您的帮助…非常感谢。

  $(document).ready(function(){ $('.nav-container').waypoint(function(direction) { $('nav#main').toggleClass('sticky', direction === 'down'); }); });   var sections = $("section"); var navigation_links = $("nav a"); sections.waypoint({ handler: function(event, direction) { var active_section; active_section = $(this); if (direction === "down") active_section = active_section.prev(); var active_link = $('nav a[href="#' + active_section.attr("id") + '"]'); navigation_links.removeClass("selected"); active_link.addClass("selected"); }, offset: 50 })   

Answer 1

这绝对是一个奇怪的。 您的标题上似乎有3px边框可能导致问题。 但是，如果您将航点的偏移量从50增加到53似乎可以解决问题。

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