我看到了一個關于如何使用 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();