ionic 新闻分类停留在顶部

自定义directives:

.directive('ionSticky', ['$ionicPosition', '$compile', '$timeout', function ($ionicPosition, $compile, $timeout) {
        return {
            restrict: 'A',
            require: '^$ionicScroll',
            link: function ($scope, $element, $attr, $ionicScroll) {
                var scroll = angular.element($ionicScroll.element);
                var clone;
                // creates the sticky divider clone and adds it to DOM
                var createAffixClone = function ($element) {
                    clone = $element.clone().css({
                        position: 'absolute',
                        top: $ionicPosition.position(scroll).top + "px", // put to top
                        left: 0,
                        right: 0
                    });
                    clone[0].className += " assertive";

                    clone.removeAttr('ng-repeat-start');

                    scroll.parent().append(clone);

                    // compile the clone so that anything in it is in Angular lifecycle.
                    $compile(clone)($scope);
                };
                
                var dividers = [];
                $timeout(function() { // wait for sub elements all added
                    var tmp = $element[0].getElementsByClassName("item-divider");
                    for (var i = 0; i < tmp.length; ++i) dividers.push(angular.element(tmp[i]));
                });

                var removeAffixClone = function ($divider) {
                    if (clone) 
                        clone.remove();
                    clone = null;
                };

                $scope.$on("$destroy", function () {
                    // remove the clone and unbind the scroll listener
                    removeAffixClone();
                    angular.element($ionicScroll.element).off('scroll');
                });

                var lastActive;
                scroll.on('scroll', function (event) {
                    var active = null;
                    var scrollTop = $ionicScroll.element.scrollTop;
                    for (var i = 0; i < dividers.length; ++i) { // can be changed to binary search
                        if ($ionicPosition.offset(dividers[i]).top - dividers[i].prop('offsetHeight') < 0) { // this equals to jquery outerHeight
                            if (i === dividers.length-1 || $ionicPosition.offset(dividers[i+1]).top -
                                 (dividers[i].prop('offsetHeight') + dividers[i+1].prop('offsetHeight')) > 0) {
                                active = i;
                                break;
                            }
                        }
                    }
    
                    if (lastActive != active) {
                        removeAffixClone();
                        lastActive = active;
                        if (active != null)
                            createAffixClone(dividers[active]);
                    }
                });
            }
        }
    }]);

2.html

<ion-content ion-sticky>

    <ion-list>
        <ion-item class="item-divider"> 国际新闻 </ion-item>
        <ion-item> 1 </ion-item>
        <ion-item> 2 </ion-item>
        <ion-item> 3 </ion-item>
        <ion-item> 4 </ion-item>
        <ion-item> 5 </ion-item>
        <ion-item> 6 </ion-item>
        <ion-item> 7 </ion-item>
        <ion-item> 8 </ion-item>


        <ion-item class="item-divider"> 国内新闻 </ion-item>
        <ion-item> 1 </ion-item>
        <ion-item> 2 </ion-item>
        <ion-item> 3 </ion-item>
        <ion-item> 4 </ion-item>
        <ion-item> 5 </ion-item>
        <ion-item> 6 </ion-item>
        <ion-item> 7 </ion-item>
        <ion-item> 8 </ion-item>
    </ion-list>

</ion-content>

3.效果图