Javascript 如何使用生成的<；部门>；从有网格的scrollmagic？

我看到了一个关于如何使用CSS flex制作一个漂亮的粘性滚动效果的教程。所以我想试一试，并尝试了CSS网格。 但它不能正常工作。我已经解决了一些主要问题，但我对这些问题的解决不是很满意。网格列仍然存在一个主要问题。共有2列。左边只有一个div，右边有两个div。左侧应保持不变，以便右侧列滚动。但只要滚动功能触发，右栏的宽度就会改变。我在这里找不到解决办法。其余的都可以，但我相信有一种更优雅的方式来实现我想要的。我非常感谢任何帮助！ 谢谢这里还有一个代码笔链接：

已经尝试用一些CSS宽度属性来解决宽度问题，但根本没有成功

HTML

JS

---

这是因为滚动。它添加了内联css和覆盖位置，这就是它移动的原因：

我在class中添加了

宽度：100%

和

位置：sticky

。产品名称 .产品名称{ 宽度：100%！重要； 位置：粘性！重要； }

视差产品*/ 函数splitScroll（）{ const controller=new ScrollMagic.controller（）； 新的魔法。场景({ 持续时间：“200%”， triggerElement:“.product title”， 触发钩：0 }) .setPin（“.product title”） .addIndicators（） .addTo（控制员）； } splitScroll（）

/*产品*/
第二节产品{
显示：网格；
网格模板区域：“标题糖”“标题私有标签”“标题冒险者”“标题糖果”“标题广告”；
页边距底部：100vh！重要；
}
gridhuelle先生{
显示：网格；
网格区域：标题；
背景色：透明！重要；
z指数：-1；
宽度：100%！重要；
}
gridhuelle先生h3{
颜色：白色；
z指数：10；
}
.产品名称{
背景色：黑色！重要；
z指数：1；
高度：300vh；
填充顶部：10.1875px！重要；
宽度：100%！重要；
位置：粘性！重要；
}
.糖{
显示：网格；
网格面积：糖；
背景色：红色；
z指数：5；
填充：1em；
边距：0！重要；
}
.自有品牌{
显示：网格；
网格区域：私有标签；
背景颜色：绿色；
填充：1em；
}
卡伦德先生{
显示：网格；
网格区域：adventkalender；
背景颜色：蓝色；
填充：1em；
}
.糖果{
显示：网格；
网格区域：糖果；
背景颜色：黄色；
填充：1em；
}
.广告{
显示：网格；
网格区域：ads；
背景颜色：橙色；
填充：1em；
}

产品测试页面
产品
试验

非常感谢您的快速响应。现在一切正常！太好了！：）

    <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>

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;
}

function splitScroll() {
   const controller = new ScrollMagic.Controller();
   new ScrollMagic.Scene({
       duration: '200%',
       triggerElement: '.product-title',
       triggerHook: 0
   })
   .setPin('.product-title')
   .addIndicators()
   .addTo(controller);
}
splitScroll();