jquery 끈적한 배경 스크롤

Question

나는 이런 식으로 뭔가를하고 싶습니다.

http://wind-dance.com/sticky/

나는 바닥까지 이미지를 스크롤 할 때까지 고정 된 위치에 HTML을합니다. 현재 내 스크립트는 html 스크롤과 함께 스크롤됩니다.

원하는 효과를 얻을 수있는 jquery 스크립트가 있습니까? 1

UPDATE 아마 위의 제 질문은 명확하지 않다. 나는 그 때 질문의 방식을 바꾸었다. div 요소가 아래쪽에 도달 할 때까지 본문 내용을 스크롤하지 않고 div 요소를 스크롤하려고합니다. 희망이 모든 사람에게 명확하게. 그리고 인라인 스크립트는 제가 현재 사용할 수있는 코드입니다.

업데이트 2

@bhavesh의 솔루션을 찾고,이

$(document).ready(function() { 
    var row = $('.row'); 
    var scroll_banner = $('.scroll_banner'); 
    var scroll_banner_height = scroll_banner.height(); 
    var row_height = row.height(); 

    $(window).on('scroll', function() { 
     scroll_banner_height = scroll_banner.height(); 
     var windowPos = $(this).scrollTop(); 
     var scrollableAmount = windowPos/row_height * scroll_banner_height; 
     row.scrollTop(scrollableAmount); 
    }) 
}); 

그것은 아주 나쁜 스크롤로 수정하고 각각의 스크롤에 몸에 scrollTop을함으로써 불안해 경험을 느끼게했습니다.

Answer 1

예제에서 인라인 스크립트를 찾을 수 있습니다. 기본적으로이 예제에서는 scrollTop 속성을 사용하여 div 스크롤 (이미지가 포함 된)으로 Window Scroll 이벤트를 첨부합니다.

$(document).ready(function() { 
    var row = $('.row'); 
    var scroll_banner = $('.scroll_banner'); 
    var scroll_banner_height = scroll_banner.height(); 
    var row_height = row.height(); 

    $(window).on('scroll', function() { 
     var windowPos = $(this).scrollTop(); 
     var oldRowPos = row.scrollTop(); 
     row.scrollTop(oldRowPos+windowPos); 
     var newRowPos = row.scrollTop(); 
     console.log([scroll_banner_height-row_height,newRowPos]); 
     if (newRowPos < (scroll_banner_height-row_height)) { 
      $(this).scrollTop(0); 
     } 
    }) 
});