自定义指令不适用于div id

Question

我有一个名为packageHeader的自定义指令，当用户滚动列表时，标题必须显示在列表顶部，直到到达下一个。它只使用不带div id的window元素，这里我附加 html

<div id="list">
 <package-header>
       <div>Header 1</div>
  </package-header>
  <div>content Header 1</div>
  <package-header>
       <div>Header2</div>
  </package-header>
  <div>content Header2</div>  
   <package-header>
       <div>Header 3</div>
  </package-header>
  <div>content Header 3</div>    
 <div>

我的自定义指令

angular.module('myApp')
.directive('packageHeader', 
  ['$window', function($window) {            

    var stickies = [],
    scroll = function scroll() {    
      var header= angular.element(document.querySelector("#List"))[0];

      console.log("scroll _ scroll");
      angular.forEach(stickies, function($sticky, index) {            
        var sticky = $sticky[0],
        pos = $sticky.data('pos');

        if (pos <= header.pageYOffset) {
          console.log("scroll offset Y");
          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 {
          console.log("scroll offset X");
          var $prev = stickies[index - 1],
          prev = $prev ? $prev[0] : null;

          $sticky.removeClass("fixed");

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


    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(document.querySelector("#List"))
      .off('scroll', scroll)
      .on('scroll', scroll);

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

CSS

package-header,
sticky {
 display: block;
 }
package-header{
 opacity:.8;
 }
package-header>sticky {
  background: #9aa2a8;
  line-height: 24px;
  z-index: 1;
  color: #fff;
  font-weight: 700;
  }
 package-header>sticky.fixed {
   position: fixed;
   top: 0;
   width: 100%;
   z-index: 0;
    }
  package-header>sticky.fixed.absolute {
    position: absolute;
   }

请帮我解决我的问题