사용자가 페이지를 스크롤 할 때 이미지 이동을 트리거하는 방법은 무엇입니까?

Question

사용자가 페이지를 스크롤 할 때 이미지를 위로 이동시킬 수있는 방법이 있습니까? 두 개의 정사각형 이미지 (너비와 높이가 각각 400 픽셀)가 모두 표시되어 있습니다. 왼쪽 이미지는 위치에 의해 고정됩니다. 오른쪽 이미지는 왼쪽 이미지보다 200px 아래에 배치됩니다. 페이지를 스크롤 할 때 오른쪽 이미지를 200 픽셀 씩 위로 이동 (왼쪽 이미지와 정렬)해야합니다. 그런 다음 그 자리에 그대로 있습니다.

이 페이지의 이미지는 내가 작성하려고하는 이미지와 완전히 동일합니다. http://jessandruss.us/#waiting 차이점은 내 이미지가 모두 보이지만이 페이지에서 왼쪽 이미지의 오버플로가 숨겨지고 다시 나타납니다. 사용자가 위로 스크롤 할 때의 원래 위치.

이 문제에 대한 도움을 주시면 감사하겠습니다. 고맙습니다.

Answer 1

$(document).ready(function(){ 
    var aligned = false; // A flag to tell us when the images are aligned 
    $(window).scroll(function(){ 
    if($(this).scrollTop() == 192) { // when the window scroll to the alignment point... 
     aligned = true; // the images are aligned 
    } 
    if (aligned) { // if they're aligned... 
     $(".image-2").css("top", 8 + $(this).scrollTop()) // match .image-2's top css property 
    }             // to the window's scrollTop value, + 
                 // 8px for the body's margin. 
    }) 
}) 

Here's a JSFiddle with what I think you want.

이미지가 줄 때 우리를 알려주는 부울 단순히있다. 이미지 -2의 CSS 속성 'top'은 윈도우의 scrollTop 값과 일치합니다.

부울 변수는 이미지가 줄 지어있을 때 알려주기 위해 현재 하드 코딩되어 있습니다 (줄을 맞췄을 때이 윈도우의 scrollTop 값을 보았습니다.이 경우 192). 이것은 이미지의 위치 나 크기의 변화를 설명하지 않기 때문에 큰 접근법은 아니지만이 방법을 사용하면 충분합니다.

편집

https://jsfiddle.net/eLdo0s3w/5/

여기서 동일한 결과를 달성하는 다른 방법이다. 오랫동안 두 번째 이미지 position: fixed을 가지고있는 것이 좋습니다. 그러면 더 효율적이어야하며, 첫 번째 방법으로 OP가 발생했다고 점프하는 것을 피할 수 있습니다.

image-2의 top CSS 속성을 대상으로하고 image-2가 필요한 지점에 도달 할 때까지 window.scrollTop 값과 일치시킵니다.

이 코드는 다시는 재사용 할 수 없지만 일회성 상황에서는 정상적으로 작동합니다. 누구든지 개선하고 싶다면 그렇게하십시오!

Answer 2

jQuery를 사용하여 그림의 transform : translateY() 속성을 scrollTop()과 연결해야하는 것처럼 들립니다. 말로 설명하기가 조금 힘듭니다. 그러나 당신이 jsfiddle을 제공한다면, 나는 당신이 의미하는 것을 보여줄 것입니다.