Custom Directive is not working with div id - angularjs

Question

I have a custom directive called packageHeader, When the user scrolls through the list, the header must show at top of the list until the next one is reached. It's working with only window element not with div id, here i'm attaching the 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>
my custom directive
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;
}
Please help me to resolve my issue