开始滚动动画，它到达该部分

Question

在下面的代码中，移动文本的动画在您到达“换行”部分时结束。我希望仅在换行部分开始时才开始动画并计算 scrollY。如果删除第一个 div，由于上述原因，动画可以正常工作。

$(document).on('scroll', function(){
$('h1').css("left", Math.max(100 - 0.2*window.scrollY, 1) + "vw");
});
$('.wrap').css('height',$('h1').outerWidth()*2)

.scrolling-text{
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  position: sticky;
  background: red;
  top: 50%;
  transform: translateY(-50%);
  height: 100vh;
  background: url(https://cdn.pixabay.com/photo/2020/07/06/01/33/sky-5375005_1280.jpg) center/cover;
}
h1{
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  font-size: 50px;
  left: 100vw;
  color: #fff;
}

.wrap {
  position: relative;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="height:1000px"></div>    
<div class="wrap">
<div class="scrolling-text">
  <h1>Moving Text on Scroll</h1>
</div>
</div>
<div style="height:1000px"></div>

编辑：尝试给定的解决方案

 const sectionToAnimate= document.querySelector('.wrap');
 const observer = new IntersectionObserver(entry => {
        if (entry.intersectionRatio > 0) {
          console.log('in the view');
          $('h1').css("left", Math.max(100 - 0.2*window.scrollY, 1) + "vw");// your animation code
          observer.unobserve(entry.target); // to trigger animation only once
        } else {
          console.log('out of view');
        }
    });
    
    observer.observe(sectionToAnimate);

.scrolling-text{
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  position: sticky;
  background: red;
  top: 50%;
  transform: translateY(-50%);
  height: 100vh;
  background: url(https://cdn.pixabay.com/photo/2020/07/06/01/33/sky-5375005_1280.jpg) center/cover;
}
h1{
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  font-size: 50px;
  left: 100vw;
  color: #fff;
}

.wrap {
  position: relative;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="height:1000px"></div>    
<div class="wrap">
<div class="scrolling-text">
  <h1>Moving Text on Scroll</h1>
</div>
</div>
<div style="height:1000px"></div>

Answer 1

您可以考虑.wrap 的offset().top 并执行以下操作：

$(document).on("scroll", function () {
  const topOffset = $(".wrap").offset().top;
  const scrollTop = window.scrollY;
  const rightValue = Math.max(100 - 0.2 * (topOffset - scrollTop), 1);

  if (rightValue < 100) {
    $("h1").css("right", rightValue + "vw");
  }
});

.scrolling-text {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  position: sticky;
  background: red;
  top: 50%;
  transform: translateY(-50%);
  height: 100vh;
  background: url(https://cdn.pixabay.com/photo/2020/07/06/01/33/sky-5375005_1280.jpg)
    center/cover;
}
h1 {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  font-size: 50px;
  right: 0;
  color: #fff;
}

.wrap {
  position: relative;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="height:1000px"></div>
<div class="wrap">
  <div class="scrolling-text">
    <h1>Moving Text on Scroll</h1>
  </div>
</div>
<div style="height:1000px"></div>