Fixed position on the calling card while scrolling

I am using Angular and compiling on iOS using Phonegap. I need to <div>

scroll and commit when it reaches the top of the page, similar to this post: https://css-tricks.com/scroll-fix-content/ .

This method works great for desktop browsers and Safari on iPhone, but breaks in Chrome on iPhone and on the native (Phonegap) iPhone app. <div>

will continue scrolling with the wrapper and then move to the desired position at the top of the page after scrolling ends.

Simplified 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);
}

      

        
        
        
      

    

And JS to add the class

element.on('scroll', handleScroll);

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

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

}