スクロールダウン中に画像を移動するとき

Question

スクロールするときにスクロールするときに、このボール（画像）をウェブサイトでデザインします。

スクリーンショット：

しかし、私はパス上にそのボールを固執するのか分かりません。

私はここ..

if (s > 40 && s <= 60) { 
      if(scrollPosition == 0){ 
       position += 2; 
      } 
      if(scrollPosition == 1){ 
       position -= 2; 
      } 
     } else if (s > 60 && s <= 80) { 
      if(scrollPosition == 0){ 
       position -= 2; 
      } 
      if(scrollPosition == 1){ 
       position += 2; 
      } 

あまりにも奇妙なようにしようとした私のコードは、私はあなたの問題を解決するために、いくつかの方法を試してみました https://codepen.io/ookangzheng/pen/eEyqjJ?editors=0011

おかげ

Answer 1

です。まず、スクロールするごとに異なることが分かったため、コーディングでs要素を使用して位置を増やす頻度を導くことは難しいと思います。

私の提案はhereです。全体の高さとウィンドウの高さを使用してパーセンテージを計算して使用してください。また、スクロールの時間が非常に長いため、位置を変更するためにその点を使用するつもりはありません。小さすぎると指摘する必要はありません。

参考までに、transition-duration: 1s;とtransition-property: all;をあなたのCSSに追加しました。スムーズに動きました。

if(s < 33){ 
     position = 60; 
    } 
    if(s > 33 && s < 66){ 
     position = 40; 
    } 
    if(s > 66 && s < 100){ 
     position = 60; 
    } 
    if(s == 100 || s == 0){ //initial the position on top and bottom 
     position = 50; 
    } 

割合コーディング

var s = $(this).scrollTop(); 
     d = $(document).height(), 
     c = $(this).height(); 
    var length = d - c; 
    var pctScrolled = Math.floor(s/length * 100) ; 

計算位置は、あなたがあなたの方法を見つけることを願って！