2017-03-07 3 views
0

한 div에서 다른 div로 transistions 때마다 내 자동 스크롤 기능을 약 50-100 픽셀 오프셋해야합니다.자동 스크롤을 어떻게 오프셋합니까?

아래 스크립트는 제가 사용하고있는 스크립트입니다. 링크를 클릭하면 연결된 Div의 맨 위로 부드럽게 스크롤됩니다.

그러나 사이트의 맨 위에 끈적한 헤더가있어서 전환 할 div가 항상 포함됩니다.

어쨌든 나는 div의 상단으로 이동하지만 -100px만큼 오프셋을 설정할 수 있습니까?

내 코드는 다음과 같습니다. 귀하의 코멘트에서

$(document).ready(function(){ 
    $('a[href^="#"]').on('click',function (e) { 
     e.preventDefault(); 

    var target = this.hash; 
    var $target = $(target); 

    $('html, body').stop().animate({ 
     'scrollTop': $target.offset().top 
    }, 900, 'swing', function() { 
     window.location.hash = target; 
    }); 
}); 
}); 
+0

당신은 아마 설정을 참조하고'Z- 인덱스 : -100px'? – Morgs

+0

아닙니다. 내 말은 링크를 클릭하면 페이지가 선택한 div의 맨 위로 스크롤 될 때 위의 100px 대신 정확하게 div의 맨 위로 스크롤하면 안됩니다. 이유는 내가 100px 높이의 끈적한 헤더가 있다는 것입니다. 이 끈적한 머리글은 항상 표시되어야하므로 Z- 인덱스를 변경하는 것은 내가 수행 한 작업이 아닙니다. 스크롤 할 때 헤더가 자동으로 스크롤되지 않도록 각 div 위에 자동 스크롤이 100px 멈추었습니다. – Pierce

+0

답변 확인 ... – Morgs

답변

0

좋아, 그래서 여기에 당신이 시도 할 수있는 작업은 다음과 같습니다

$('html, body').stop().animate({ 
     'scrollTop': ($target.offset().top - 100) // 100 is hard coded though you can make it dynamic if you know identifier of your sticky div like so: ($target.offset().top - $("#sticky-div").outerHeight()) 
    }, 900, 'swing', function() { 
     window.location.hash = target; 
}); 
+0

완벽한 고마워요! 나는 그것이 그렇게 단순하다는 것을 깨닫지 못했다. – Pierce

+0

멋지다 나는 도움이되었다 ... – Morgs