我已經(jīng)看了很多關(guān)于這個(gè)主題的其他帖子，但是我找不到一個(gè)可以復(fù)制我正在尋找的功能的帖子。我試圖完成的是類(lèi)似于& quot我們讓您的日程安排變得前所未有的簡(jiǎn)單& quot你可以看到，當(dāng)用戶滾動(dòng)瀏覽時(shí)，右邊的圖像一旦位于屏幕右半部分的中心就會(huì)變得粘粘的，當(dāng)你滾動(dòng)瀏覽左邊的段落時(shí)，圖像會(huì)變成不同的圖像。我正試著重現(xiàn)這一切，但一點(diǎn)也不成功。我試著用js來(lái)計(jì)算滾動(dòng)百分比，并在此基礎(chǔ)上，淡出圖像和新圖像，但它根本不起作用。任何幫助將不勝感激，并提前感謝您。

[flow], [sticky]{
  flex: 1
}

[sticky]{
  background: salmon;
  position: sticky;
  top: 0;
  height: 100vh;
  margin-left: 50%;
}

[flow]{
  height: 300vh;
  width: 50%;
  background: slateblue;
}

p{
  height: 50vh
}

<p>content for scroll</p>
<div main>
    <div sticky>sticky part goes here</div>
    <div flow>flow part goes here</div>
</div>
<p>content for scroll</p>