我创建了两个div元素
当用户滚动div#element-b和#header时,一个目标到达#header顶部附近,容器中的一个目标-element-a滚动到页面顶部并显示动画。
目前我使用一个标题
<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>
