ユーザーがページをスクロールしたときにイメージを動かす方法は？

Question

ユーザーがページをスクロールしたときに画像を上に移動する方法はありますか？私は2つの正方形の画像を持っています（幅が400ピクセル、高さがそれぞれ400ピクセルです）。左の画像は位置によって固定されています。右の画像は、左の画像の200ピクセル下に配置されます。ページをスクロールするときに、右のイメージを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.

画像が並んでいるとき、私たちに伝えるために、ブールは、単純にあります。それらがある場合、image-2のCSSプロパティ 'top'はウィンドウのscrollTop値と一致します。

ブール型変数は、イメージが並んでいるときに私たちに教えるために現在ハードコードされています（私は、ウィンドウのscrollTop値が並んでいるときこの値を見ています）。画像の位置や大きさの変化を考慮しないため、これは大きなアプローチではありませんが、これは十分に進まなければなりません。

EDIT

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

は、ここで同じ結果を達成するための別の方法です。限り、2番目の画像position: fixedを持っている限り、それはより効率的でなければなりません、うまくいけば、OPが最初の方法で起こったという周りのジャンプを避けるでしょう。

これは、image-2のtop CSSプロパティを対象とし、image-2が必要なポイントに達するまで、window.scrollTop値と一致させます。

また、このコードはあまり再利用できませんが、1回限りの状況で正常に動作するはずです。誰かがそれを改善したいなら、それをしてください！

Answer 2

jQueryを使用して画像のtransform：translateY（）プロパティとscrollTop（）をリンクする必要があるように聞こえます。言葉で説明するのは少し難しいですが、もしあなたがjsfiddleを提供すれば、私はあなたが何を意味するかを見せます。