Sticky table header when scrolled in angularJs

Question

I am trying to create a table header which gets fixed at a certain. Here is a sample I have worked on(this is what i really need in AngularJS) http://plnkr.co/edit/cxZzrMeiYyaoQQOotX3H?p=preview but it doesn't work in a real application, I am not sure what am I missing on. It would be great to get some suggestions and maybe sample of code .

vm.testScroll = function() {
    console.log("insideTestScroll---");
    var window_top = $($window).scrollTop();
    var div_top = $('#sticky-anchor').offset().top;
    if (window_top > div_top) {
        console.log(window_top + " " + div_top);
        $('#sticky').addClass('stick');
    } else {
        console.log(window_top + " " + div_top);
        $('#sticky').removeClass('stick');
    }
    console.log("after removeClass!");
};

console.log("entering testScroll function call-");
$window.onscroll = vm.testScroll();
console.log("running windowScroll");

Answer 1

So the process is always to use directive when manupulating the html DOM,now the new issue is i am trying to implement this on a table header and the table header shrinks to the header data width,"what a DRAG!!!!!",here is the sample code //Table HeaderLocking-------------

<table  class="table"  ts-wrapper> 
<thead id="testTable">
<th><label class="checkbox">
<input type="checkbox" ng-model="vm.selectAll" ng-change="vm.selectAllResults();">
</label></th>

 function tableScroll () {
    var directive = {
        restrict: 'A',
        link: function(scope,element){ 
        element.bind('scroll', function(){
        console.log("scrollingTable");
        //var test =  element[0].scrollHeight - element.scrollTop();
        var test = element.scrollTop();
        scope.test = test;
        console.log(test);
        if(test >= '391'){
            console.log("reached!");
            angular.element($('#testTable')).addClass('tableHeader');
        }
        else if(test<'391'){
            console.log("moreToGo");
            angular.element($('#testTable')).removeClass('tableHeader');
        }    

             });
        }
    };
    return directive;
}