sg28 sg28 - 1 year ago 92
AngularJS Question

Sticky table header when scrolled in angularJs

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) 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() {
var window_top = $($window).scrollTop();
var div_top = $('#sticky-anchor').offset().top;
if (window_top > div_top) {
console.log(window_top + " " + div_top);
} else {
console.log(window_top + " " + div_top);
console.log("after removeClass!");

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

Answer Source

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();">

 function tableScroll () {
    var directive = {
        restrict: 'A',
        link: function(scope,element){ 
        element.bind('scroll', function(){
        //var test =  element[0].scrollHeight - element.scrollTop();
        var test = element.scrollTop();
        scope.test = test;
        if(test >= '391'){
        else if(test<'391'){

    return directive;
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download