한 페이지 내비게이션 상단에 들여 쓰기 들여 쓰기

Question

저는 Javascript/Jquery의 초보자입니다. 그래서 저는 당신이 제 코드와 제 질문에 호의적이기를 바랍니다.

제 예제를 방문하고 섹션 링크를 클릭하십시오. 상단의 섹션이 조금 들여 쓰기되어있을 수 있습니다 (Inspector를 사용할 수 있음). 나는 그것이 변화하는 헤더에 달려 있다고 생각한다.

두 번째를 클릭하면 위치가 정확합니다. 즉, 헤더의 스타일이 이미 전환 된 경우 더 이상 문제가 없습니다.

$(document).ready(function() { 

Example on codepen.io

$ (문서) CSTE 연구진(), 'A', 기능 (이벤트 '를 클릭'{ 에서는 event.preventDefault()를 스크롤 // 부드러운 앵커;

$('html, body').animate({ 
     scrollTop: $($.attr(this, 'href')).offset().top 
    }, 500); 

});

// 스티키 내비게이션
var stickyNavTop = $ ('. 스티키 네비게이션). 오프셋().

var stickyNav = function(){ 
var scrollTop = $(window).scrollTop(); 

if (scrollTop > stickyNavTop) { 
    $('.sticky-navi').addClass('sticky'); 
} else { 
    $('.sticky-navi').removeClass('sticky'); 
} 
}; 

stickyNav(); 

$(window).scroll(function() { 
    stickyNav(); 
}); 

});

누군가 나를위한 해결책이 있습니까? 제발 ... :)?

Answer 1

이는 경쟁 조건으로 인해 발생합니다. 당신이 nav에 scroll 할 때 offset은 아직 sticky가 아니지만 nav가 page top에 stick되어있을 때 조건이 바뀌는 동안 링크를 스크롤하는데 필요한 offset은 무효가됩니다. 당신은 그것을 보상해야합니다.

var nav = $('.sticky-navi'); 
var oft = nav.hasClass('sticky') ? 0 : nav.height(); 
$('html, body').animate({ 
    scrollTop: $($.attr(this, 'href')).offset().top - oft 
}, 500); 

이것은 끈적 거리지 않을 때 nav의 높이를 뺍니다. 이는 스크롤하는 동안 nav가 페이지 상단에 달라 붙는다는 것을 알기 때문입니다. 이미 끈적 거리면 아무 것도 할 필요가 없습니다.