jQuery Waypoint粘滞导航通过点击滚动时1px off

Question

我正在用Waypoints撕掉我的头发。首先，我不熟悉JavaScript。我正在使用Waypoints 1）将导航固定到某一点的屏幕顶部（此功能正常）和2），在到达某些部分时高亮显示导航项目。除非您点击需要路标向上的导航项目，例如点击“例外价值”，然后点击“目的地”。您会注意到，航点似乎是一个像素关闭，“特殊值”仍然突出显示。如果你向上滚动一个像素，“Destinations”最终会突出显示。这是复制此行为的唯一方法...点击向下滚动的导航项可以正常工作。这是我的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 
    })