当用户使用jQuery滚动时，使用多个div触发滚动事件

Question

我创建了两个div元素

当用户滚动div时，＃element-b和＃header-one-target到达容器中＃header-one-target的顶部附近＃element-A会随着动画滚动到页面顶部。

当前，我正在使用一个触发动画的头文件<h1 id="animate-hd-b">Header One</h1>。哪个工作正常。但是我想使用多个标头，例如<h1 id="animate-hd-b">Header One</h1>，<h1 id="animate-hd-c">Header Two</h1> <h1 id="animate-hd-d">Header Three</h1>和动画#header-one-target

我当前的代码在下面

var currentPlan = $('#element-A'),
  optionsPlan = $('#element-B'),
  combinedScroll = optionsPlan.scrollTop();

optionsPlan.scroll(function() {

  var way = optionsPlan.scrollTop(),
    rate = Math.round(optionsPlan.find('#animate-hd-b').position().top - 70),
    area = currentPlan.scrollTop(),
    turf = Math.round(currentPlan.find('#header-one-target').position().top - 50),
    down = way > combinedScroll;
  combinedScroll = way;

  if (rate < 0 && down && turf) {
    currentPlan.not(':animated').animate({
      scrollTop: area + turf
    }, 700);
  }

  if (!down && area) {
    currentPlan.not(':animated').animate({
      scrollTop: 0
    }, 700);
  }
});

#element-A,
#element-B {
  width: 50%;
  height: 100vh;
  float: left;
  overflow: auto;
}

#element-A {
  background: orange;
}

#element-B {
  background: yellow;
}

.content {
  padding-bottom: 100vh;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="element-A">
  <div class="content">
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <h1 id="header-one-target">Animate This Card</h1>
  </div>
</div>

<div id="element-B">
  <div class="content">
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <h1 id="animate-hd-b">Header One</h1>
  </div>
</div>