如何使scrollmagic场景“取消固定”

Question

我正在使用ScrollMagic。如果您在https://newsinteractive.post-gazette.com/test/index3.html上查看我的页面，除了最后一个场景（绿色场景）以外，所有其他操作都在做我想要的。与以前的屏幕重叠。我只希望它向上滚动，而先前的场景可以滚动。我该怎么办？

html：

<div class="parallax" id="">
        <div class="row">
            <h1>Title</h1>
            <div class="byline">By xxx<span class="pub_date">August xx, 2018</span></div>
        </div>

    </div>

    <div class="content1" id="">
        <div class="left">

            <img src="img/phipps_web.jpg"/>
        </div>
    </div>

    <div class="content2" id="">
        <div class="right">
            <h2>Conversatory</h2>
        </div>
    </div>

    <div class="content3" id="">
        <div class="row">

        </div>
    </div>

jquery：

var controller = new ScrollMagic.Controller();

new ScrollMagic.Scene({
        triggerElement: "#parallax",
        triggerHook: "onEnter",
    })
    .duration('200%')
    .setTween("#parallax", {
        backgroundPosition: "50% 100%",
        ease: Linear.easeNone

    })
    .addTo(controller);

    /*new ScrollMagic.Scene({
        triggerElement: "#parallax",
        triggerHook: "onEnter"
    })
    .setPin("#parallax")
    .addTo(controller);*/


    new ScrollMagic.Scene({
        triggerElement: ".content1",
        triggerHook: "onLeave",
        reverse:true,
        offset: 0,

    })
    .setPin(".content1")
    .addTo(controller);


    new ScrollMagic.Scene({
        triggerElement: ".content2",
        triggerHook: "onLeave",
        duration: .7* $(window).height(),
        offset: 0
    })
    .setPin(".content2")
    .addTo(controller);


    new ScrollMagic.Scene({
        triggerElement: ".content3",
        triggerHook: "onLeave",
        offset: 0
    })
    .setPin(".content3")
    .addTo(controller);

css：

body {
    margin: 0;
    font-family: sans-serif;
}

.row {
    height: 100vh;
    color: white;


}

.parallax {
    background: url('img/5FI01LLQ.JPG') center center no-repeat;
    background-size: cover;
    height: 100vh;
    width: 100vw;
    position: fixed;
    top: 0;
    text-align: center;
}
    .parallax h1 {
        font-size: 4rem;
        margin-top: 15%;
        text-shadow: 5px 5px 10px #666;
        margin-bottom: 30px;
        opacity: 0;
        animation: fadeIn 3s forwards;
        animation-iteration-count: 1;

    }
    @keyframes fadeIn {
      0% {
        opacity:0;
      }

      100% {
         opacity:1;
      }

    }

    .byline {
        font-size: 1.1rem;
        opacity: 0;
        animation: fadeIn 3s forwards;
        animation-iteration-count: 1;
        animation-delay: 1.2s;
    }
    .pub_date {
        margin-left: 20px;
        font-size: 1rem;
    }

.content1 {
    background: white;
    margin-top: 100vh;
    max-width: 100vw;
    position: relative;
    height: 100vh;
    margin-top: 100vh;
}
    .left {
        width: 64vw;
        max-width: 64vw;
        float: left;
        text-align: center;
        position: relative;

    }
    .left img {
        margin-top: 20px;
        margin-right: 20px;
        max-width: 98%;
        float: right;
        position: relative;
    }
.content2 {
    margin-left: 64%;
    margin-top: 100vh;
    background: transparent;
    height: 150vh;
}
    .right {
        width: 35%;
        float: left;

    }
    .right h2 {

    }

.content3  {
    background: lime;
    height: 100vh;
    width: 100%;
}