垂直滾動時水平移動DIV

Question

我正嘗試創建一個腳本，用於在用戶垂直滾動時從右向左移動div。它應該對任何具有「sidepara」類的div做這個效果。它應該只移動div，如果它是可見的（用戶已滾動到它）。我很難得到正確的數學....什麼是正確的公式水平移動成正比的垂直滾動位置？

$(function() { 
 
    $(window).scroll(function() { 
 
    console.clear(); 
 
    $(".sidepara").each(function() { 
 

 
     var sY = $(this).position().top - $(window).scrollTop(), 
 
     dY = $(this).position().top, 
 
     wH = window.innerHeight; 
 

 
     var scrollPercent = (sY/(dY - wH)); 
 
     var position = (scrollPercent * ($(document).width())); 
 
     position = window.innerWidth - position; 
 
     $(this).css("margin-left", position); 
 

 

 
     console.log("scoll Y: " + sY); 
 
     console.log("div Y: " + dY); 
 
     console.log("div X: " + position); 
 
     console.log("window height: " + wH); 
 
     console.log("scrollPercent: " + scrollPercent); 
 
     console.log("----"); 
 

 
     //print number for debugging 
 
     $(this).html(position); 
 
    }); 
 

 
    }) 
 
});

html, 
 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.stretch { 
 
    height: 2000px; 
 
} 
 

 
.sidepara { 
 
    color: red; 
 
} 
 

 
.parallaxContainer { 
 
    overflow: hidden; 
 
    width: 100%; 
 
    height: 256px; 
 
    background: black; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="stretch"></div> 
 
<div class="parallaxContainer"> 
 
    <!-- <img src="helloworld.png" class="sidepara" /> --> 
 
    <div class="sidepara"></div> 
 
</div> 
 
<div class="stretch"></div> 
 

 
<div class="parallaxContainer"> 
 
    <!-- <img src="helloworld.png" class="sidepara" /> --> 
 
    <div class="sidepara"></div> 
 
</div> 
 
<div class="stretch"></div> 
 

 
<div class="parallaxContainer"> 
 
    <!-- <img src="helloworld.png" class="sidepara" /> --> 
 
    <div class="sidepara"></div> 
 
</div> 
 
<div class="stretch"></div>

Answer 1

終於想通了，算算吧！這裏是任何人可能喜歡做類似的代碼。

 $(function() { 
 
      $(window).scroll(function() { 
 
       $(".sidepara").each(function() { 
 
         var sY = $(this).position().top - $(window).scrollTop(), 
 
          dY = window.innerHeight, 
 
          wH = 0; 
 

 
         var scrollPercent = (sY/(dY - wH)); 
 
         var position = (scrollPercent * ($(document).width())); 
 
         $(this).css("margin-left", position); 
 
       }); 
 

 
      }) 
 
     });

 html, 
 
     body { 
 
      margin: 0; 
 
      padding: 0; 
 
     } 
 

 
     .stretch { 
 
      height: 2000px; 
 
     } 
 

 
     .sidepara { 
 
font-size: 5em; 
 
      color: red; 
 
      white-space: nowrap; 
 
     } 
 

 
     .parallaxContainer { 
 
      overflow: hidden; 
 
      width: 100%; 
 
      height: 256px; 
 
      background: black; 
 
     }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="stretch"></div> 
 
    <div class="parallaxContainer"> 
 
     
 
     <div class="sidepara">hello world!</div> 
 
    </div> 
 
    <div class="stretch"></div> 
 

 
    <div class="parallaxContainer"> 
 
     
 
     <div class="sidepara">hellow world!</div> 
 
    </div> 
 
    <div class="stretch"></div> 
 

 
    <div class="parallaxContainer"> 
 
     
 
     <div class="sidepara">hello world!</div> 
 
    </div> 
 
    <div class="stretch"></div>