jQuery 컨테이너의 끝까지 도달 할 때 컨테이너에 고정하는 방법

Question

이 스크립트는 이후에 수행 한 작업을 수행하므로 고정 폭의 너비가 작동하지 않습니다. "100 % 높이;"

http://benoit.pointet.info/stuff/jquery-scrollsnap-plugin/

그래서 필자는 정말 후 div의 어떤 높이가 될 수 있도록, 사업부의 끝에 도달 할 때 스냅 플러그인 무엇 그것은 단지와 함께 작동합니다.

내 페이지의 div는 각각 약 2000 픽셀이므로 사용자가 div의 하단에 도달하면 플러그인에서 볼 수 있듯이 사용자가 div의 하단에 도달하면 다음 섹션 (또는 사용자가 충분히 아래로 스크롤하지 않은 경우 현재 페이지)으로 스냅합니다. .

답변 감사합니다!

Answer 1

waypoints 플러그인을 확인합니다.

현재 섹션이 맨 아래에 도달하면 내 데모가 스냅되도록 변경했습니다.

섹션 높이가 커서 사용자가 충분히 스크롤하지 않아도 해당 섹션의 내용을 볼 수 없으면 현재 섹션의 맨 위로 스냅하지 않아야합니다.

바쳐 대한

http://jsfiddle.net/T89LF/4/show

http://jsfiddle.net/T89LF/4/

HTML

<section></section> 
<section></section> 
<section></section> 
<section></section> 
<section></section> 

jQuery를

$('section').waypoint(function(direction) { 
    if(direction == 'down'){ 
     disable_scroll(); 
     //Animate to top of the section 
     $('html, body').stop().animate({ 
      scrollTop: $(this).offset().top 
     },300,"easeInOutQuart", function() { 
      enable_scroll(); 
     }); 
    } 
}, { offset: '100%' }); 

function preventDefault(e) { 
    e = e || window.event; 
    if (e.preventDefault) 
     e.preventDefault(); 
    e.returnValue = false; 
} 

function wheel(e) { 
    preventDefault(e); 
} 

function disable_scroll() { 
    if (window.addEventListener) { 
     window.addEventListener('DOMMouseScroll', wheel, false); 
    } 
    window.onmousewheel = document.onmousewheel = wheel; 
} 

function enable_scroll() { 
    if (window.removeEventListener) { 
     window.removeEventListener('DOMMouseScroll', wheel, false); 
    } 
    window.onmousewheel = document.onmousewheel = null; 
}