垂直滚动时水平移动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>