粘性容器+滚动上的更改块（例如在Apple HomePod页面上）

Question

我尝试使效果像https://www.apple.com/homepod/ 更改滚动块：

我在jsfiddle上创建示例： link

我的麻烦： 我有3张幻灯片可以滚动更改：

var slide1 = $('.img-description.first');
  var slide2 = $('.img-description.second');
  var slide3 = $('.img-description.third');

如果我向下滚动（到示例中红色块的末尾）然后向后滚动，则代码可能会正常工作。 但是，如果我重复此算法（没有重新加载页面），则不会出现某些幻灯片（slide1通常不会出现） 我认为我的JS第100行的状况很麻烦 但我不明白如何解决。 也许我的方法是完全错误的。

有人可以帮助我吗？