粘头与-webkit-溢出滚动CSS(Sticky Headers with -webkit-ove

用改进的jQuery插件，我们已经开发出一种粘头滚动框，一个跨浏览器解决方案，将在所有计算机上工作，以模仿本机应用程序在iOS本机功能。

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

一切工作，包括在iOS。

进一步说，我想实现的iOS原生平滑以及使用-webkit-溢出滚动：触摸。

问题是，这是造成头部搬迁一旦滚动完成，而不是同时滚动正在发生。 有没有什么办法解决这一问题。 这里是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();
});

文章来源: Sticky Headers with -webkit-overflow-scrolling CSS