Question

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

一切正常，包括在iOS上。

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

问题是，这会导致标题在滚动完成后重新定位，而不是在滚动过程中重新定位。有没有什么办法解决这一问题。这是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

0 个答案: