diff --git a/lrStickyHeader.js b/lrStickyHeader.js index 38f6cbf..3348a65 100644 --- a/lrStickyHeader.js +++ b/lrStickyHeader.js @@ -44,16 +44,17 @@ } }, eventListener: function eventListener () { - var offsetTop = getOffset(this.thead, 'offsetTop'); - var offsetLeft = getOffset(this.thead, 'offsetLeft'); - var classes = this.thead.className.split(' '); + var offsetTop = this.offsetTopOverride ? this.offsetTopOverride : getOffset(this.thead, 'offsetTop'); + var offsetLeft = getOffset(this.thead, 'offsetLeft'); + var classes = this.thead.className.split(' '); + var scrollPosition = this.isWindowScroll ? this.scrollContainer.scrollY : this.scrollContainer.scrollTop; - if (this.stick !== true && (offsetTop - window.scrollY < 0)) { + if (this.stick !== true && (offsetTop - scrollPosition < 0)) { this.stick = true; this.treshold = offsetTop; this.setWidth(); this.thead.style.left = offsetLeft + 'px'; - this.thead.style.top = 0; + this.thead.style.top = this.isWindowScroll ? 0 : this.scrollContainer.getBoundingClientRect().top + 'px'; setTimeout(function () { classes.push('lr-sticky-header'); this.thead.style.position = 'fixed'; @@ -61,7 +62,7 @@ }.bind(this), 0); } - if (this.stick === true && (this.treshold - window.scrollY > 0)) { + if (this.stick === true && (this.treshold - scrollPosition > 0)) { this.stick = false; this.thead.style.position = 'initial'; classes.splice(classes.indexOf('lr-sticky-header'), 1); @@ -70,16 +71,22 @@ } }; - return function lrStickyHeader (tableElement) { + return function lrStickyHeader (tableElement, options) { + options = options || {}; + options.scrollContainer = options.scrollContainer || window; + options.offsetTopOverride = options.offsetTopOverride || null; + + var isWindowScroll = options.scrollContainer === window; + var thead; var tbody; if (tableElement.tagName !== 'TABLE') { throw new Error('lrStickyHeader only works on table element'); } + tbody = tableElement.getElementsByTagName('TBODY'); thead = tableElement.getElementsByTagName('THEAD'); - if (!thead.length) { throw new Error('could not find the thead group element'); } @@ -91,9 +98,11 @@ thead = thead[0]; tbody = tbody[0]; - var stickyTable = Object.create(sticky, { element: {value: tableElement}, + scrollContainer: { value: options.scrollContainer }, + isWindowScroll: { value: isWindowScroll }, + offsetTopOverride: { value: options.offsetTopOverride }, thead: { get: function () { return thead; @@ -107,12 +116,11 @@ }); var listener = stickyTable.eventListener.bind(stickyTable); - window.addEventListener('scroll', listener); + options.scrollContainer.addEventListener('scroll', listener); stickyTable.clean = function clean () { - window.removeEventListener('scroll', listener); + options.scrollContainer.removeEventListener('scroll', listener); }; return stickyTable; }; }); -