垂直滚动时水平移动DIV

Question

我正在尝试创建一个脚本，当用户垂直滚动时，该脚本会从右向左移动div。它应该对任何具有＆＃34; sidepara＆＃34;类的div执行此效果。如果div可见（用户已滚动到它），它应该只移动div。我无法正确计算数学......将div水平移动与垂直滚动位置成比例的正确公式是什么？

＆＃13;

＆＃13;

$(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);
    });

  })
});

＆＃13;

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

.stretch {
  height: 2000px;
}

.sidepara {
  color: red;
}

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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>