Javascript ScrollMagic.js-如何在部分滑动后添加内容？

使用此演示：

我正试图找出如何在最后一次擦除部分之后添加额外的内容。这里有一个粗略的想法，我试图完成，希望它是有意义的

代码示例会很有帮助

---

主要问题是最后一个wipr部分保持固定在顶部，不允许其后面的内容移动到顶部，而是移动到其后面。

我一直在尝试完成完全相同的事情。我在上找到了一个示例，并对其进行了修改，使最后两个部分的行为正常（向上滚动页面而不重叠以前的内容）：

HTML

CSS

---

我一直在努力完成同样的事情。我在上找到了一个示例，并对其进行了修改，使最后两个部分的行为正常（向上滚动页面而不重叠以前的内容）：

HTML

CSS

<div style="height:100%;background:#000;text-align:center;"><b>OUTSIDE OF PIN CONTAINER</b></div>
<div id="pinContainer">
     <div class="panel first" style="background:#111;">
        <b>FIRST SLIDE</b>
     </div>
     <div class="panel second" style="background:#333;">
         <b>second slide</b>
     </div>
     <div class="panel third" style="background:#555;">
          <b>third slide</b>
     </div>
     <div class="panel fourth" style="background:#777;">
          <b>fourth slide</b>
     </div>
     <div class="panel fifth" style="background:#999;">
          <b>fifth slide</b>
     </div>
</div>
<div style="background:pink;">
          <b>sixth slide</b>
          <p>
                Aenean lobortis arcu in aliquam rutrum. Aliquam ultrices consequat semper. Cras congue in mauris vel condimentum. Nullam at ipsum euismod, fermentum neque non, interdum lorem. Suspendisse semper, urna sed mattis pellentesque, ipsum urna accumsan enim, nec mattis tellus massa id velit. In quis dolor aliquam, maximus urna sed, vestibulum magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla facilisi. Cras sed sollicitudin urna. Etiam mi nibh, ornare in ligula auctor, eleifend hendrerit ipsum. Pellentesque in eros et erat iaculis bibendum. Vestibulum sed ornare sapien. Nunc nec quam ut erat interdum condimentum. Pellentesque mauris nulla, bibendum vel finibus eu, fringilla blandit sapien.
            </p>
            <p>
                Aenean lobortis arcu in aliquam rutrum. Aliquam ultrices consequat semper. Cras congue in mauris vel condimentum. Nullam at ipsum euismod, fermentum neque non, interdum lorem. Suspendisse semper, urna sed mattis pellentesque, ipsum urna accumsan enim, nec mattis tellus massa id velit. In quis dolor aliquam, maximus urna sed, vestibulum magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla facilisi. Cras sed sollicitudin urna. Etiam mi nibh, ornare in ligula auctor, eleifend hendrerit ipsum. Pellentesque in eros et erat iaculis bibendum. Vestibulum sed ornare sapien. Nunc nec quam ut erat interdum condimentum. Pellentesque mauris nulla, bibendum vel finibus eu, fringilla blandit sapien.
            </p>
            <p>
                Aenean lobortis arcu in aliquam rutrum. Aliquam ultrices consequat semper. Cras congue in mauris vel condimentum. Nullam at ipsum euismod, fermentum neque non, interdum lorem. Suspendisse semper, urna sed mattis pellentesque, ipsum urna accumsan enim, nec mattis tellus massa id velit. In quis dolor aliquam, maximus urna sed, vestibulum magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla facilisi. Cras sed sollicitudin urna. Etiam mi nibh, ornare in ligula auctor, eleifend hendrerit ipsum. Pellentesque in eros et erat iaculis bibendum. Vestibulum sed ornare sapien. Nunc nec quam ut erat interdum condimentum. Pellentesque mauris nulla, bibendum vel finibus eu, fringilla blandit sapien.
            </p>
     </div>

<div style="background:purple;">
          <b>seventh slide</b>
          <p>
                Aenean lobortis arcu in aliquam rutrum. Aliquam ultrices consequat semper. Cras congue in mauris vel condimentum. Nullam at ipsum euismod, fermentum neque non, interdum lorem. Suspendisse semper, urna sed mattis pellentesque, ipsum urna accumsan enim, nec mattis tellus massa id velit. In quis dolor aliquam, maximus urna sed, vestibulum magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla facilisi. Cras sed sollicitudin urna. Etiam mi nibh, ornare in ligula auctor, eleifend hendrerit ipsum. Pellentesque in eros et erat iaculis bibendum. Vestibulum sed ornare sapien. Nunc nec quam ut erat interdum condimentum. Pellentesque mauris nulla, bibendum vel finibus eu, fringilla blandit sapien.
            </p>
            <p>
                Aenean lobortis arcu in aliquam rutrum. Aliquam ultrices consequat semper. Cras congue in mauris vel condimentum. Nullam at ipsum euismod, fermentum neque non, interdum lorem. Suspendisse semper, urna sed mattis pellentesque, ipsum urna accumsan enim, nec mattis tellus massa id velit. In quis dolor aliquam, maximus urna sed, vestibulum magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla facilisi. Cras sed sollicitudin urna. Etiam mi nibh, ornare in ligula auctor, eleifend hendrerit ipsum. Pellentesque in eros et erat iaculis bibendum. Vestibulum sed ornare sapien. Nunc nec quam ut erat interdum condimentum. Pellentesque mauris nulla, bibendum vel finibus eu, fringilla blandit sapien.
            </p>
            <p>
                Aenean lobortis arcu in aliquam rutrum. Aliquam ultrices consequat semper. Cras congue in mauris vel condimentum. Nullam at ipsum euismod, fermentum neque non, interdum lorem. Suspendisse semper, urna sed mattis pellentesque, ipsum urna accumsan enim, nec mattis tellus massa id velit. In quis dolor aliquam, maximus urna sed, vestibulum magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla facilisi. Cras sed sollicitudin urna. Etiam mi nibh, ornare in ligula auctor, eleifend hendrerit ipsum. Pellentesque in eros et erat iaculis bibendum. Vestibulum sed ornare sapien. Nunc nec quam ut erat interdum condimentum. Pellentesque mauris nulla, bibendum vel finibus eu, fringilla blandit sapien.
            </p>
     </div>

$(function () { // wait for document ready
     // init
     var controller = new ScrollMagic.Controller();
     // define movement of panels
     var wipeAnimation = new TimelineMax()
         .fromTo("div.panel.second", 1, {y: "100%"}, {y: "0%", ease: Linear.easeNone})  // in from left
         .fromTo("div.panel.third",    1, {y:  "100%"}, {y: "0%", ease: Linear.easeNone})  // in from right
         .fromTo("div.panel.fourth", 1, {y: "100%"}, {y: "0%", ease: Linear.easeNone}) // in from top
         .fromTo("div.panel.fifth", 1, {y: "100%"}, {y: "0%", ease: Linear.easeNone}); // in from bottom
         // create scene to pin and link animation
     new ScrollMagic.Scene({
         triggerElement: "#pinContainer",
         triggerHook: "onLeave",
         duration: "300%"
     })
     .setPin("#pinContainer")
     .setTween(wipeAnimation)
     .addTo(controller);
});

body {
  font-family: "Source Sans Pro", Arial, sans-serif;
  background-color: #c7e1ff;
  font-size: 13px;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  margin:0;
  padding:0;
  color:#fff;
}
body, html {
  height: 100%
}
#pinContainer {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.panel {
  height: 100%;
  width: 100%;
  position: absolute;
  text-align:center;
}
b {
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  position:relative;
  font-size:30px;
}