我试图在页面上创建具有向下滑动效果（垂直，从下到上）的部分/组件。但是我不希望这是一个整页功能-此部分/组件应该能够与其他未受影响的部分存在于同一视口中。到目前为止，我已经草拟了一些东西，但是问题是，带有滑动效果的组件底部留下了很大的空白空间。我应该如何使紧靠“效果好的”组件下方的组件齐平地放置在“效果好的”组件的底部而不滚动？

codepen：https://codepen.io/cakePlease/pen/gOOvMMe

HTML：

        <div style="background-color:#000;">
<p>This is to take up space</p>
<p>This is to take up space</p>
<p>This is to take up space</p>
<p>This is to take up space</p>
<p>This is to take up space</p>
<p>This is to take up space</p>
<p>This is to take up space</p>
<p>This is to take up space</p>
<p>This is to take up space</p>
<p>This is to take up space</p>
<p>This is to take up space</p>
<p>This is to take up space</p>
<p>This is to take up space</p>
<p>This is to take up space</p>
<div id="pinmaster">
  <div id="pinContainer">
    <section class="panel one">
      <h1>Pin Panel A</h1>
    </section>
    <section class="panel two">
      <h1>Pin Panel B</h1>
    </section>
    <section class="panel three">
      <h1>Pin Panel C</h1>
    </section>
    <section class="panel four">
      <h1>Pin Panel D</h1>
    </section>
    <section class="panel five">
      <h1>Pin Panel E</h1>
    </section>
    <section class="panel six">
      <h1>Pin Panel F</h1>
    </section>
  </div>

</div>
  <div class="other">
    Other page components here,could show up on the same viewport. <br />This section should sit flush at the bottom of the "slider" above it without affecting the scroll-animation effect.</div>
<p>This is to take up space</p>
<p>This is to take up space</p>
<p>This is to take up space</p>
<p>This is to take up space</p>
<p>This is to take up space</p>
<p>This is to take up space</p>
<p>This is to take up space</p>
<p>This is to take up space</p>
<p>This is to take up space</p>
<p>This is to take up space</p>
<p>This is to take up space</p>
<p>This is to take up space</p>
<p>This is to take up space</p>
<p>This is to take up space</p>
</div>

        body {
  color: #fff;
}
h1 {
  font-size: 32px;
  color: white;
  position: relative;
  display: block;
  top: 40%;
  text-align: center;
  text-transform: uppercase;
}
#pinmaster {
  position: relative;
  background: #000;
}
#pinContainer {
  width: 80%;
  height: 350px;
  overflow: hidden;
  position: relative;
  margin: 0 10%;
}
.panel {
  height: 100%;
  width: 100%;

  position: absolute;

}



.one {
  background-color: #1bb1a5;
}
.two {
  background-color: #94c356;
}
.three {
  background-color: #e3aa59;
}
.four {
  background-color: #777;
}

.five {
  background-color: #a63ba0;
}
.six {
  background-color: #cf5b21;
}

        console.clear();
var controller = new ScrollMagic.Controller();
var sections = document.querySelectorAll("section");
var tl = new TimelineMax();
var bodyAnim = new TimelineMax();
var offset = window.innerHeight;

for (let i = 1; i < sections.length; i++) {
  tl.from(sections[i],1,{ y: "100%",ease: Linear.easeNone },"+=1");
}

new ScrollMagic.Scene({
  triggerElement: "#pinmaster",triggerHook: "onLeave",duration: "500%"
})
  .setPin("#pinmaster")
  .setTween(tl)
  .addIndicators({
    colorTrigger: "white",colorStart: "white",colorEnd: "white",indent: 40
  })
  .addTo(controller);

$("section").each(function(i) {
  var tl = new TimelineMax();
  new ScrollMagic.Scene({
    triggerElement: "#pinmaster",triggerHook: 0,offset: i * offset
  })
    .setTween(tl)
    .addTo(controller)
    .addIndicators({
      colorTrigger: "white",indent: 120
    });
});