2

使用修改后的 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();
});
4

0 回答 0