响应式ScrollMagic

Question

我试图确保在调整浏览器窗口大小时，使用ScrollMagic的元素保持在正确的位置。

这是我的jsfiddle。 https://jsfiddle.net/5frsn1kc/41/

仅供参考，如果RESULTS FRAME高度大约为1000px，则元素看起来正确

不确定该怎么做，因此不胜感激！

HTML

<main>
    <svg width="0" height="0">
        <defs>
            <filter id="dropshadow" height="130%">
                <feGaussianBlur in="SourceAlpha" stdDeviation="4" />
                <!-- stdDeviation is how much to blur -->
                <feOffset dx="-5" dy="10" result="offsetblur" /> <!-- how much to offset -->
                <feComponentTransfer>
                    <feFuncA type="linear" slope="0.5" />
                    <!-- slope is the opacity of the shadow -->
                </feComponentTransfer>
                <feMerge>
                    <feMergeNode /> <!-- this contains the offset blurred image -->
                    <feMergeNode in="SourceGraphic" />
                    <!-- this contains the element that the filter is applied to -->
                </feMerge>
            </filter>
        </defs>
    </svg>
    <div class="container-fluid">

        <div class="row vh-50">
        </div>

        <div class="row">

            <div class="col-6 bg-primary vh-100">
                <div class="d-block" id="trigger1"></div>
                <div class="pin" id="pin1">
                    <svg width="309" height="72" xmlns="http://www.w3.org/2000/svg">
                        <g fill="#00D47B" fill-rule="evenodd" filter="url(#dropshadow)">
                            <path d="M0 0h309v72H0z" />
                        </g>
                    </svg>
                </div>
                <div class="d-block" id="trigger2"></div>
                <div class="pin" id="pin2">
                    <svg width="309" height="204" xmlns="http://www.w3.org/2000/svg">
                        <g fill="#FF8A8A" fill-rule="evenodd" filter="url(#dropshadow)">
                            <path d="M0 0h202v52H0zM309 0v204h-84V0zM0 76h202v52H0zM0 152h202v52H0z" />
                        </g>
                    </svg>
                </div>
                <!-- <div class="d-block" id="trigger3"></div> -->
                <div class="pin" id="pin3">
                    <svg width="351" height="351" xmlns="http://www.w3.org/2000/svg">
                        <g fill="#61007D" fill-rule="evenodd" filter="url(#dropshadow)">
                            <path d="M0 0h351v351H0z" />
                        </g>
                    </svg>
                </div>
            </div>
            <div class="col-6 bg-warning vh-100">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eu porta libero. Aenean
                    libero dolor, imperdiet sit amet risus in, tempus vulputate neque. Cras eu augue varius,
                    ultricies nibh eu, vehicula tellus. Proin a turpis lacinia, malesuada enim eu,
                    condimentum lacus. Donec luctus elit eu elit rutrum feugiat. Integer vehicula nisi
                    velit, eu lobortis massa dictum eget. Ut in mauris nec tellus ullamcorper ultricies.
                    Aliquam erat volutpat. Sed dolor turpis, finibus in ligula vitae, feugiat convallis
                    tellus. Donec laoreet luctus diam ac rhoncus. Nullam feugiat nibh vitae mauris rhoncus
                    auctor. Vivamus condimentum, enim eget accumsan eleifend, erat nunc accumsan quam, in
                    condimentum nulla nulla ac elit.</p>
            </div>
        </div>

        <div class="row">
            <div class="col-12 vh-50"></div>
            <div class="col-12 vh-50"></div>
            <div class="col-12 vh-50"></div>
        </div>

    </div>
</main>

CSS

.vh-50 {
      height: 50vh!important;
}

#pin1,
#pin2 {
    z-index: 1;
}

#pin2 {
    padding-top: 95px;
}

#pin3 {
  position: absolute;
  bottom: 0;
}

svg {
    transform: skew(20deg);

    #pin1 & {
        margin-left: 60px;
    }

    #pin2 & {
        margin-left: 118px;
    }

    #pin3 & {
        margin-left: 80px;
    }
    &:not(:root) {
      overflow: visible !important;
    }
}

JS

$(function () {

    // initialize scrollmagic
    var controller = new ScrollMagic.Controller();

    // wait for document ready
    // build scene
    var scene1 = new ScrollMagic.Scene({
    triggerElement: "#trigger1",
    // duration: 430
    // duration: '100%'
    duration:  $("#pin3").height() + 260
    })
    // .setPin("#pin1")
    .setPin("#pin1", {pushFollowers: false})
    .addIndicators({
    name: "1 (duration: 580)"
    })
    .addTo(controller);

    var scene2 = new ScrollMagic.Scene({
      triggerElement: "#trigger2",
      // duration: 330
      // duration: '100%'
      duration: $("#pin3").height() + 188
    })
      .setPin("#pin2", { pushFollowers: false })
      .addIndicators({
        name: "2 (duration: 290)"
      })
      .addTo(controller);

});