jquery - -webkit-overflow-scrolling CSS を使用した固定ヘッダー

Question

変更された jQuery プラグインを使用して、すべてのコンピューターで動作するクロス ブラウザー ソリューションを備えたネイティブ アプリで iOS のネイティブ機能を模倣するスティッキー ヘッダー スクロール ボックスを開発しました。

これがフィドルです：http://jsfiddle.net/f3y9s/1/

iOSを含め、すべてが機能しています。

さらに進んで、-webkit-overflow-scrolling:touch を使用して、iOS のネイティブ スムージングも実装したいと考えています。

問題は、スクロールが行われている間ではなく、スクロールが完了するとヘッダーが再配置されることです。これを修正する方法はありますか。これがフィドルです：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();
});