Die letzte Kopfzeile kann nicht mit der AngularJS Custom Directive

Question

oben angeklebt werden. Ich habe eine benutzerdefinierte Direktive aufgerufen. Wenn der Benutzer durch die Liste scrollt, muss die Kopfzeile oben in der Liste angezeigt werden, bis die nächste erreicht ist. Das Problem ist, wenn ich an der letzten Überschrift erreiche, wird es nicht an der Spitze bleiben, die auch mit der Seite blättern.

meine benutzerdefinierte Richtlinie

angular.module('myApp', []) 
    .directive('packageHeader', ['$window', function($window){ 
    var stickies = [], 
     scroll = function scroll() { 

     angular.forEach(stickies, function($sticky, index) { 

      var sticky = $sticky[0], 
      pos = $sticky.data('pos'); 

     if (pos <= $window.pageYOffset) { 
      var $next = stickies[index + 1],    
       next = $next ? $next[0] : null, 
       npos = $next.data('pos'); 

       $sticky.addClass("fixed"); 

      if (next && next.offsetTop >= npos - next.clientHeight) 
      $sticky.addClass("absolute").css("top", npos - sticky.clientHeight + 'px'); 
     } else { 
      var $prev = stickies[index - 1], 
       prev = $prev ? $prev[0] : null; 

      $sticky.removeClass("fixed"); 

      if (prev && $window.pageYOffset <= pos - prev.clientHeight) 
      $prev.removeClass("absolute").removeAttr("style"); 
     } 
     }); 
    }, 

    //link function 
    link = function($scope, element, attrs) { 
     var sticky = element.children()[0], 
      $sticky = angular.element(sticky); 

     element.css('height', sticky.clientHeight + 'px'); 

     $sticky.data('pos', sticky.offsetTop); 
     stickies.push($sticky); 
     }; 

angular.element($window).off('scroll', scroll).on('scroll', scroll); 

return { 
    restrict: 'E', 
    transclude: true, 
    //sticky - getting from style sheet 
    template: '<sticky ng-transclude></sticky>', 
    link: link 
}; 
    }]); 

HTML

<div class="demo"> 
    <div> 
    <package-header> 
    <div>Header First</div> 
    </package-header> 
<div class="whitespace">  
    Header First with content............. First Header 
</div> 
</div> 
<div> 
<package-header> 
    <div> Header Second </div>  
    </package-header> 
<div class="whitespace">  
    Header second with content............. Second Header 
</div> 

Hier bin Anbringen ich meinen Code https://plnkr.co/edit/VFyGlNk2641rg31nCq8O?p=preview

Ich möchte die letzte Überschrift auch oben anzeigen. Bitte helfen Sie mir, mein Problem zu lösen.

Answer 1

Ihr Code scheint ganz gut mit korrigierten Indizes für prev/next sticky Elemente zu arbeiten:

https://embed.plnkr.co/B1ispK1gfMF3b85jDgkW/