Javascript / jQuery - 对包含内容的div的视差效果

Question

我想在点击一个元素时对div创建一个视差效果。我有这样的html设置：

<div id="app">

    <div id="main-section">
      <top-bar></top-bar>

      <div id="main-content">
        ...

      </div>
    </div>
    <div id="item-detail">
    </div>

  </div>

我在main-content div中有一个图像滑块，点击图片滑块div item-detail正在填充内容，页面加载为空。现在我想以某种方式获得div填充时的视差效果，它滚动到顶栏并越过main-content div。

我尝试过这样的事情：

$('html, body').animate({
    scrollTop: $("#item-detail").offset().top
}, 1700);

parallaxScroll();

function parallaxScroll(){
    var scrolledY = $(window).scrollTop();
    $('#item-detail').css('top','-' + ((scrolledY*1.3)) + 'px');
}

div的css：

#main-section {
  position: absolute;
  top: 0;
  height: 900px;
  width: 100%;
  background-image: url('/img/cover.png');
  background-size: cover;
}

#main-content {
  position: absolute;
  top: 77px;
  height: 833px;
}

#item-detail {
  position: absolute;
  top: 900px;
  z-index: 1;
}

但它对我没有用，并且在点击执行该功能后，main-content和item-detail都将top设置为0。