Sticky Headers with -webkit-overflow-scrolling CSS

使用修改过的jQuery插件，我们开发了一个粘性标题滚动框，用于在本机应用程序中模仿iOS上的本机function，并使用可在所有计算机上运行的跨浏览器解决方案。

这是FIDDLE： http ： //jsfiddle.net/f3y9s/1/

一切正常，包括在iOS上。

更进一步，我想使用-webkit-overflow-scrolling：touch来实现iOS的原生平滑。

问题是，这会导致标题在滚动完成后重新定位，而不是在滚动发生时重新定位。 有没有什么办法解决这一问题。 这是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(); });