jQuery 웨이 포인트 클릭으로 스크롤하는 것이 1px 인 경우 끈적 거리는 행위

Question

Waypoints로 머리카락을 찢어 버릴 정도입니다. 우선, 나는 자바 스크립트에서 경험하지 못했습니다. Waypoints를 사용하여 1) 특정 지점 (이 작동)에서 화면 상단으로 탐색을 수정하고 2) 특정 섹션에 도달하면 탐색 항목을 강조 표시합니다. 웨이 포인트 방향이 필요한 탐색 항목을 클릭하는 경우를 제외하고 모든 것이 완벽하게 작동합니다 (예 : "Exceptional Value"를 클릭하고 "Destinations"를 클릭하십시오. 웨이 포인트가 픽셀 인 것처럼 보이고 "예외 값"이 여전히 강조 표시됩니다. 픽셀을 위로 스크롤하면 대상이 마침내 강조 표시됩니다. 이 동작을 복제하는 유일한 방법은 아래로 스크롤되는 nav 항목을 클릭해도 문제가 없습니다. 여기 내 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 
    })