如何解决从带有网格的 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>CSSsection.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;}JSfunction splitScroll() {   const controller = new ScrollMagic.Controller();   new ScrollMagic.Scene({       duration: '200%',       triggerElement: '.product-title',       triggerHook: 0   })   .setPin('.product-title')   .addIndicators()   .addTo(controller);}splitScroll();