바닥 글 섹션을 쳤을 때 jQuery 웨이 포인트를 해제합니다

Question

그래서 완벽하게 작동하는 끈적 인 소셜 미디어 탐색을 위해 jQuery 웨이 포인트를 사용하고 있습니다. 그러나 바닥 글 요소를 누르면 스크롤이 계속됩니다. 이상적으로는 끈적한 탐색기가 부모 컨테이너 (.content)의 맨 아래에 머 무르도록하고 싶습니다. 사용자가 다시 스크롤하면 끈적 거리는 끈이 다시 끈적 거리게됩니다.

누구나 쉽게이 방법을 알 수 있습니까? Here's a fiddle.

var sticky = new Waypoint.Sticky({ 
    element: $('.sticky')[0] 
}); 

Answer 1

당신은 바닥 글에 다른 웨이 포인트를 설정해야하고, 끈적 DIV 바닥 글 (즉 오프셋 옵션을 설정이다)에 도달하려고하면, DIV가 고정되도록 만드는 .stuck 클래스를 제거 (토글이있는 경우 꼬리말 div가 다시 표시 될 때 .stuck 클래스가 다시 나타납니다. 당신은 이것을 달성 :

$('.footer').waypoint(function(direction) { 
    $('.sticky').toggleClass('stuck', direction === 'up') 
}, { 
offset: function() { 
    return $('.sticky').outerHeight() 
}}); 

확인하는 당신이 원하는 경우 (그래서 희망 :)!) : https://jsfiddle.net/elbecita/mna64waw/3/

편집 : 나는 한 가지를 잊어 버렸습니다! 당신은 바닥 글을 능가 끈적 끈적한 DIV에 대한 클래스가 필요합니다, 그래서 당신이 필요로하는 최종 JS는 다음과 같습니다

$('.footer').waypoint(function(direction) { 
    $('.sticky').toggleClass('stuck', direction === 'up'); 
    $('.sticky').toggleClass('sticky-surpassed', direction === 'down'); 
}, { offset: function() { 
     return $('.sticky').outerHeight(); 
}}); 

과 .sticky-surpassed은 다음과 같습니다

.sticky-surpassed { 
    position:absolute; 
    bottom: 0; 
} 

확인 업데이트 여기 : https://jsfiddle.net/elbecita/mna64waw/5/