在滚动期间，Phonegap固定位置div

Question

我正在使用Angular并使用Phonegap编译到iOS。我需要<div>滚动并在到达页面顶部时固定，类似于以下帖子：https://css-tricks.com/scroll-fix-content/。

此方法适用于桌面浏览器和iPhone上的Safari，但在iPhone和本机（Phonegap）iPhone应用程序中的Chrome中断。 <div>将继续使用包装器滚动，然后在滚动结束后，跳转到页面顶部的所需位置。

简化的HTML

<div class="wrapper">

  <other-content></other-content>

  <div id="top-shelf">
    scroll to fixed position
  </div>
</div>

CSS

.wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  margin:0;
  max-width:100%;
  overflow-x: hidden;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}

.fixed-top-shelf #top-shelf {
  position: fixed;
  top: 48px;
  z-index: 1;
  width: 100%;
  -webkit-backface-visibility: hidden;
  -webkit-transform: translateZ(0);
}

和JS一起添加类

element.on('scroll', handleScroll);

function handleScroll() {
  var st = element.scrollTop();

  if (st <= 80) {
    element.addClass('fixed-top-shelf');
  } else {
    element.removeClass('fixed-top-shelf');
  }

}