如何解决从带有网格的 scrollmagic 生成的 <div> 的问题？

Question

我看到了一个关于如何使用 CSS flex 制作漂亮的粘性滚动效果的教程。所以我想试一试，并用 CSS 网格进行了尝试。但它不会正常工作。我已经修复了一些主要问题，但我对修复不是很满意。并且网格列仍然存在主要问题。有 2 列。左边只有一个 div，右边是几个 div。左应该坚持，以便右列滚动。但只要滚动功能触发右列更改宽度。我在这里找不到解决方案。其余的工作，但我相信有一种更优雅的方式来实现我想要的。我非常感谢任何帮助！谢谢！这里还有一个 CodePen 链接：https ://codepen.io/roottjk/pen/QWLPwxZ

已经尝试使用一些 CSS 宽度属性修复宽度问题，但根本没有解决。

HTML

    <div class="product-title">

        <h3>TEST</h3>

    </div>

  </div>

      <div class="sugar">

      </div>  

      <div class="private-label">

    </div>

      <div class="adventkalender">

    </div>

      <div class="sweets">

        </div>  

      <div class="ads">

        </div>

</section>

CSS

section.products {  

    display: grid;

    grid-template-areas:

    'title sugar'

    'title private-label'

    'title adventkalender'

    'title sweets'

    'title ads';

    margin-bottom: 100vh !important; 

}

.gridhuelle {

    display: grid;

    grid-area: title;

    background-color: transparent !important;

    z-index: -1;

    width: 100% !important;

}

.gridhuelle h3 {

    color: white;

    z-index: 10;

}

.product-title {  

    background-color: black !important;

    z-index: 1;

    height: 300vh;

    padding-top: 10.1875px !important;

}

.sugar {

    display: grid;

    grid-area: sugar;

    background-color: red;

    z-index: 5;

    padding: 1em;

    margin: 0 !important;   

}

.private-label {

    display: grid;

    grid-area: private-label;

    background-color: green;

    padding: 1em;

}

.adventkalender {

    display: grid;

    grid-area: adventkalender;

    background-color: blue;

    padding: 1em;

}

.sweets {

    display: grid;

    grid-area: sweets;

    background-color: yellow;

    padding: 1em;

}

.ads {

    display: grid;

    grid-area: ads;

    background-color: orange;

    padding: 1em;

}

JS

function splitScroll() {

   const controller = new ScrollMagic.Controller();

   new ScrollMagic.Scene({

       duration: '200%',

       triggerElement: '.product-title',

       triggerHook: 0

   })

   .setPin('.product-title')

   .addIndicators()

   .addTo(controller);

}

splitScroll();