jQuery路径点粘性导航，当通过点击向上滚动是1px off

Question

我几乎要用Waypoints把头发扯掉了。首先，我在javascript方面还远没有经验。我使用路径点来1)将导航固定在屏幕顶部的某一点(这很好)和2)，当到达某些部分时突出显示导航项。一切工作完美，除了当你点击一个导航项目，需要航路点方向向上，例如点击"特殊值"，然后点击"目的地"。你会注意到航路点似乎少了一个像素，"特殊值"仍然高亮显示。如果你向上滚动一个像素，"目的地"最终会高亮显示。这是复制这种行为的唯一方法……单击向下滚动的导航项可以正常工作。这是我的JS: http://jsfiddle.net/TreUd/。这是它实现的网站:http://ifb.thepinkrobot.com/。谢谢你的帮助…非常感谢。

        <!-- waypoints -->
    <script type="text/javascript">
    $(document).ready(function(){
      $('.nav-container').waypoint(function(direction) {
        $('nav#main').toggleClass('sticky', direction === 'down');  
      });
    });
    </script>
    <script type="text/javascript">
    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
        })
    </script>
    <!-- end waypoints -->

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
    })