JQuery Waypoint Scroll Stop at Footer

Question

JQuery Waypoint를 사용하여 왼쪽 탐색을 스크롤하고 있습니다. 꼬리말 앞에서 스크롤을 멈추게하려면 어떻게해야합니까?

<script type="text/javascript"> 
var $jq = jQuery.noConflict(); 

$jq(document).ready(function() { 

$jq('.top').addClass('hidden'); 
$jq.waypoints.settings.scrollThrottle = 30; 


$jq("#toc").waypoint(function(event, direction) { 
    $jq('.top').toggleClass('hidden', direction === "up"); 

    if (direction === 'down') { 
     var cssObj = {'position' : 'fixed', 'top' : '3px', 'left' : '100px'} 
    } 
    else { 
     var cssObj = {'position' : 'absolute', 'top' : '3px', 'left' : '100px'} 
    } 
    $jq('#toc').css(cssObj); 
},{ 
    offset: '3' 
}); 



}); 
</script> 

Answer 1

넌 오프셋 #toc 소자 플러스 패딩, 테두리 및 위치 가산의 높이와 동일하다 꼬리말 또 다른 중간 지점을 설정할 수있다.

그래서 어쩌면 같은 :

var toc = $("#toc"); 
$("footer").waypoint(function(event,direction){ 
    toc.css({ 
     position: "absolute", 
     bottom: "403px" 
    }); 
},{ 
    offset: toc.height() + 6 
}); 

이 방법은 바닥 글의 상단과 페이지 상단 사이의 공간의 양이 #toc 요소의 전체 높이와 동일한 것을 감지하면, position:absolute 및 bottom 값은 403px으로 돌아갑니다. 바닥 글의 높이와 일치시키고 바닥 글과 #toc 요소 사이의 원하는 간격에 맞게 조정합니다.

'의 예입니다.

Answer 2

위로 스크롤 할 때 요소 고정 해제를 포함하여 최신 버전의 Waypoint를 사용하여 구현 한 방법은 다음과 같습니다.

$('footer').waypoint({ 
    handler: function(direction) { 
     if (direction == 'down') { 
      $moduleTop.css({ 
       position: "absolute", 
       top: $nextModule.offset().top - $moduleTop.outerHeight() 
      }); 
     } 
     else if (direction == 'up') { 
      $moduleTop.css({ 
       position: '', 
       top: '' 
      }); 
     } 
    }, 
    offset: $moduleTop.height() 
});