jQuery 애니메이션 페이지 가장자리에서 스크롤

Question

스크롤 막대가 아래쪽으로 움직이면서 더 많은 내용을 보더라도 오른쪽면에 고정되어있는 것과 같은 동작을하고 싶은 사이드 바가 있습니다. 나는 그것을 완전히 고정시키고 페이지를 jQuery를 사용하여 아래로 스크롤하는 사이드 바에 의해 처리했다. 현재이 방법을 사용하고 있습니다. 사이드 바의 상단은 약 150 픽셀들이 줄이 종료됩니다 아래로 완전히 스크롤 할 때 사용자가 작은 뷰포트가 상단에서 상쇄되도록

<script type="text/javascript"> 
$(window).scroll(function() { 
    $('#sidebarPage1').animate(
     { top: $(window).scrollTop() + 'px' }, 
     { queue: false, duration: 500, easing: 'easeInOutSine' } 
    ); 
}); 
</script> 

내 페이지에 100 % 넓은 머리글과 바닥 글을 내 바닥 글이나 화면에서 완전히 벗어난 정말 작은보기 포트 인 경우

상단에서 설정할 항목을 쉽게 계산할 수 있으며, 바닥 글에서 충돌하지 않도록 뷰포트 하단에서 약 200 픽셀을 중지 할 수 있습니까? 조엘의 대답에서

업데이트 :

<script type="text/javascript"> 
    $(window).scroll(function() {    
     var dynamicSidebarHeight = $('#sidebar').height();    
     var fixedFooterOffset = 168; 
     var scrollTo = $(window).scrollTop() 
     var calculatedMaxTop = $('#footer').offset().top - 
        dynamicSidebarHeight - fixedFooterOffset; 

     if (scrollTo > calculatedMaxTop) { 
      scrollTo = calculatedMaxTop; 
     } 
     $('#sidebarPage1') 
      .animate(
       { top: scrollTo + 'px' }, 
       { queue: false, duration: 500, easing: 'easeInOutSine' } 
     ); 
    }); 
</script> 

고정 .height의() 함수

는

Answer 1

아마 바닥 글의 상단을 사용할 수 있습니까?

$(window).scroll(function() { 
    var scrollTo = $(window).scrollTop() 
    if (scrollTo > ($("#footer").offset().top - 200)) 
     scrollTo = $("#footer").offset().top - 200; 

    $('#sidebarPage1').animate(
     { top: scrollTo + 'px' }, 
     { queue: false, duration: 500, easing: 'easeInOutSine' } 
    ); 
}); 

테스트되지 않음. 이 기능을 사용하려면 parseInt을해야 할 수도 있습니다.

Answer 2

이 솔루션을 만든 방법에 대해이 효과를 더 자세하게 설명하는 방법에 대한 블로그 게시물을 작성했습니다 : Using jQuery to create a scrolling sidebar.