Sticky Headers with -webkit-overflow-scrolling CSS

问题:

Using a modified jQuery plugin we have developed a sticky headers scrolling box to imitate the native functionality on iOS in native apps with a cross browser solution that will work on all computers.

Here is the FIDDLE: http://jsfiddle.net/f3y9s/1/

Everything is working including on iOS.

Going further I would like to implement the native smoothing of iOS as well using -webkit-overflow-scrolling:touch.

The problem is that this is causing the header to relocate once the scroll is complete rather than whilst scrolling is taking place. Is there any way to fix this. Here is the FIDDLE: http://jsfiddle.net/f3y9s/

jQuery

$(document).ready(function($){
    $.fn.stickySectionHeaders = function(options) {
    var settings = $.extend({ stickyClass : 'sticky', headlineSelector: 'strong'}, options);

    return $(this).each(function() {
      var $this = $(this);
      $(this).find('ul:first').bind('scroll.sticky', function(e) {
        $(this).find('> li').each(function() {
          var $this      = $(this),
              top        = $this.position().top,
              height     = $this.outerHeight(),
              $head      = $this.find(settings.headlineSelector),
              headHeight = $head.outerHeight();

          if (top < 0) {
            $this.addClass(settings.stickyClass).css('paddingTop', headHeight);
            $head.css({
              'top'  : (height + top < headHeight) ? (headHeight - (top + height)) * -1 : '',
              'width': $this.outerWidth() - $head.cssSum('paddingLeft', 'paddingRight')
            });
          } else {
            $this.removeClass(settings.stickyClass).css('paddingTop', '');
          }
        });
      });
    });
  };
  $.fn.cssSum = function() {
    var $self = $(this), sum = 0;
    $(arguments).each(function(i, e) {
      sum += parseInt($self.css(e) || 0, 10);
    });
    return sum;
  };
});

$(function(){
    $('.list').stickySectionHeaders();
});