diff --git a/README.md b/README.md index 60c30b9..1259d10 100644 --- a/README.md +++ b/README.md @@ -46,17 +46,30 @@ when the header is sticked the class name ``lr-sticky-header`` is added to the t angular.directive('stStickyHeader', ['$window', function ($window) { return { require: '^?stTable', - link: function (scope, element, attr, ctrl) { - var stickyHeader = lrStickyHeader(element[0]); - scope.$on('$destroy', function () { - stickyHeader.clean(); - }); + link: function (scope, element, attr, ctrl) { + //used settimeout such that it will support for mulitple smart tables it will wait until it finds element[0]. + //this is optional attributes which can be used for specific height and class{headerHeight: attr.stStickyHeaderTop,tBodyCls: attr.stStickyHeaderTbodyClass } + setTimeout(function () { + var stickyHeader = lrStickyHeader(element[0], {headerHeight: attr.stStickyHeaderTop,tBodyCls: attr.stStickyHeaderTbodyClass }); + scope.$on('$destroy', function () { + stickyHeader.clean(); + }); + },10); scope.$watch(function () { return ctrl.tableState(); }, function () { $window.scrollTo(0, lrStickyHeader.treshold); }, true) + + // The below code is a fix for resize window in all browsers + angular.element($window).on("resize", function(){ + //stickyHeader.clean(); + angular.element(element[0]).find('thead').removeAttr('style'); + angular.element(element[0]).find('thead').removeClass('lr-sticky-header'); + $window.scrollTo(0, lrStickyHeader.treshold); + var stickyHeader = lrStickyHeader(element[0], {headerHeight: attr.stStickyHeaderTop,tBodyCls: attr.stStickyHeaderTbodyClass }); + }); } } }]); diff --git a/lrStickyHeader.js b/lrStickyHeader.js index fafac0d..9b8e06f 100644 --- a/lrStickyHeader.js +++ b/lrStickyHeader.js @@ -27,33 +27,51 @@ //todo some memoize stuff setWidth: function setWidth () { var firstRow = this.tbody.getElementsByTagName('TR')[0]; - var trh = this.thead.getElementsByTagName('TR')[0]; + var trLength = this.thead.getElementsByTagName('TR').length; + var trCollection=[]; + for(var i=0; i0){ + trTdCollection[j]=trCollection[j].getElementsByTagName('TD'); + }else if(elementByTH.length>0){ + trTdCollection[j]=trCollection[j].getElementsByTagName('TH'); + } + } [].forEach.call(firstTds, setCellWidth); - [].forEach.call(firstThs, setCellWidth); + for(var k=0;k 0)) { + if (this.stick === true && (this.treshold - scrollPosition > 0)) { this.stick = false; - this.thead.style.position = 'initial'; + this.tbody.className = ''; + this.thead.style.position = 'static'; classes.splice(classes.indexOf('lr-sticky-header'), 1); this.thead.className = (classes).join(' '); } @@ -72,8 +91,12 @@ return function lrStickyHeader (tableElement, options) { var headerHeight = 0; + var tBodyCls = ''; if (options&&options.headerHeight) headerHeight=options.headerHeight; + + if (options&&options.tBodyCls) + tBodyCls = options.tBodyCls; var thead; var tbody; @@ -112,6 +135,11 @@ get: function () { return tbody; } + }, + tBodyCls: { + get: function() { + return tBodyCls; + } } });