jQuery scrollTo는 두 번째 클릭 이후에만 올바르게 작동합니다.

Question

페이지에 여러 개의 scrollTo가 있습니다. 문제는 첫 번째 클릭에서 조금 떨어져 있지만 후속 클릭 후에는 정확하다는 것입니다. 이 문제를 해결하려면 어떻게해야합니까? 나는 더에게 제안 아래의 솔루션을 시도하지 않은

>> scrollTo Error

: 내 코드는 아래 페이지에서 상단 탐색을 클릭하면?

var newHash; 

$(".nav-right li a").on('click', function(event) { 

    newHash = $(this).attr("id"); 

    if (this.hash !== "") { 


     // Store hash 
    hash = $("h2" + "#" + $(this).attr("id")); 
     $('html, body').stop().animate({ 
     scrollTop: $(hash).offset().top - $("#header.swag-style").height(), 
     }, 800, function(){ 
     return false; 

     window.location.hash = newHash; 

     }); 
    } // End if 

    }); 

다음은 문제를 볼 수있는 것 같습니다 이익.

>> stackoverflow

Answer 1

의 $("#header").height()를 사용해보십시오. I는 코드 블록이있는 아래 class.swag-style

if ($(this).scrollTop() > 50) { 

        $('#header').addClass('swag-style'); 

       } else { 
        $('#header').removeClass('swag-style'); 

       } 

추가 상기 코드는 상기 제 클릭이 상기 조건을 만족하는 스크롤 트리거 후에 .swag-style 클래스가 더해진다 의미했다. 그 결과로 높이가 변합니다. 이후의 클릭은 올바른 높이를 찾습니다.

아래의 줄을 추가하여 문제가 해결되면 클릭 한 번에 클래스 .swag-style을 추가하면 클릭 트리거 식 스크롤이 발생하기 전에 올바른 높이가 제자리에 놓이게됩니다.

$('#header, #search-box').addClass('swag-style'); 

Answer 2

문제는 $("#header.swag-style").height()가 null 귀하의 #header 처음의 클래스 장식이 스타일이없는 것입니다.

대신 나는 문제가 무엇인지 파악 $("#header.swag-style").height()

$('html, body').stop().animate({ 
    scrollTop: $(hash).offset().top - $("#header").height(), 
    }, 800, function(){ 
    return false; 

    window.location.hash = newHash; 

    });