사용자가 스크롤해야 볼 수있는 부분 아래로 스크롤 한 경우에만 jquery가 포함 된 라이트 박스를 표시하려면 어떻게해야합니까?

Question

설정 : 헤더 입력란이 960px x 400px이므로 YouTube 동영상이 왼쪽에 표시되고 다른 글 머리 기호와 통화에 적합합니다. 오른쪽의 행동으로 해당 div는 숨겨져 있으며 버튼 클릭으로 만 표시됩니다. 충분히 쉬워.

하지만 컬러 박스 내에서 동일한 숨겨진 콘텐츠를 표시하고 싶지만 해당 사용자가 스크롤해야 볼 수있는 부분이 750px 아래로 스크롤해야합니다. 말하면 400px 만 스크롤하고 재생 버튼을 클릭하면 화면 상단으로 다시 쏘아 올려 위에서 언급 한 헤더 div에서 동영상을 볼 수 있습니다.

나는이 기능을 돕기 위해 중간 지점을 사용할 생각 이었지만 더 좋은 방법이있을 수 있습니다.

당신의 생각을 알려주세요.

Answer 1

<a href="#">Play</a> 사용자가 문서의 맨 위로 이동합니다. 클릭 핸들러가 true를 반환하고 stopPropagation을 반환하지 않도록하십시오. 당신이 스크롤 고려할 수

Answer 2

뭔가 이것은 window을 스크롤 할 때 내가이 예에서

$(function(){ 
$(window).scroll(function() { 
    var scrolled = $(this).scrollTop(); 
    if(scrolled > 150) { 
     $('#up').fadeIn(); 
    } else if(scrolled < 150) { 
     $('#up').fadeOut(); 
    } 
}); 
    $('#up').click(function(){ 
     $.scrollTo('#Top'); 
    }); 
}); 

JS Fiddle에서 만든 예이다 jQuery를 (here를 읽기)에서 .scroll()과 .scrollTo()plugin for jQuery

입니다 150px 이상이면 #up div가 표시됩니다. 스크롤 막대의 위치가 top 인 경우 #up div가 숨겨집니다. #up div를 클릭하면 div #top으로 자동 스크롤됩니다 (fiddle 참조).

몇 가지 변경 사항이 있으면 필요한 것을 얻을 수 있다고 생각합니다.