jQuery, 클릭하여 오프셋을 추가하는 클래스 49px

Question

내 웹 사이트에서 웹 사이트의 다른 부분으로 스크롤하는 Scroll To 기능을 사용하고 있습니다.

섹션이 완벽하게 착륙 할 수 있도록 49px만큼 오프셋 된 고정 탐색 기능이 있습니다.

$('nav a').click(function() { 
    $('html, body').animate({scrollTop: ($(this.hash).offset().top - 49)}, 1800, 
     function() {} 
    ); 
    return false; 
}); 

하지만 웹 사이트에는 블로그가 있습니다. 그래서 내가 원하는 것은 블로그에서 고정 탐색을 클릭하면 탐색을 49 픽셀 씩 상쇄 할 것이고 현재는 오프셋을 재조정하지 않습니다. 나는 이것을 시도했지만 나던 일을하지 않았다.

$('nav a.secondary-link').click(function(event) { 
    $('html, body').animate({scrollTop: ($(this.hash).offset().top - 49)}, 1800, 
     function() {} 
    ); 
    return false; 
}); 

내 작업을 볼 수 있습니다. 뉴스 페이지를 처음 보는 경우 섹션에서 49 픽셀 오프셋을 인식하지 못하는 것을 알 수 있습니다.

http://aspe.fishtankcreative.co.uk/newcastle-falcons/blog/falcons-to-support-primary-school-sport-with-new-initiative.php

http://aspe.fishtankcreative.co.uk/newcastle-falcons/

이 도와주세요. 감사합니다

Answer 1

그것은 블로그 게시물에 링크가 실제 링크이므로 페이지를 변경하여 서버에 대한 완전한 요청과 모든 자바 스크립트의 재로드를 유발하기 때문에 발생합니다. 클릭 이벤트는 다음 페이지가 올라갈 때 사라져서 스크롤하려는 곳입니다. 다행히 우리는 우리와 함께 해시를 얻습니다. 그러면 우리가 나중에 애니메이션을 적용 할 수있는 고리가 생깁니다.

이 당신을 위해 무엇을해야 :)

$(document).ready(function(){ 
    var idOfSection = window.location.hash.substring(1); 
    var $sectionToScrollTo = $('#'+idOfSection); 
    if($sectionToScrollTo.length > 0){ 
     var offset = $sectionToScrollTo.offset().top-49; 
     $('html, body').animate({scrollTop: offset },1800); 
    } 
}); 

을 당신이 추가, 상단에서 스크롤하려는 경우 $('html, body').animate({scrollTop: 0},0);을 우선으로 if 문에.

---

내가 두 번째 코드 예제를 테스트하지 않았습니다 더

$(document).ready(function(){ 
    var sectionId = window.location.hash; 
    scrollToSection(sectionId); 

    $('body').on('click', 'nav a', function(){ 
     var secId = this.hash; 
     scrollToSection(secId); 
    } 
}); 

function scrollToSection(sectionId){ 
    var $sectionToScrollTo = $(sectionId); 
    if($sectionToScrollTo.length > 0){ 
     var offset = $sectionToScrollTo.offset().top-49; 
     $('html, body').animate({scrollTop: offset },1800); 
    } 
} 

주를 향상시킬 수 있습니다.