From 1b0520b4d7326086f49195097e1ba4097bbb3b58 Mon Sep 17 00:00:00 2001 From: Martin Brennan Date: Mon, 21 Sep 2015 11:37:21 +1000 Subject: [PATCH 1/3] added options to be able to set the scrollContainer and an offsetTop override value --- lrStickyHeader.js | 59 +++++++++++++++++++++++++++++------------------ 1 file changed, 36 insertions(+), 23 deletions(-) diff --git a/lrStickyHeader.js b/lrStickyHeader.js index 38f6cbf..96c3a50 100644 --- a/lrStickyHeader.js +++ b/lrStickyHeader.js @@ -44,42 +44,54 @@ } }, eventListener: function eventListener () { - var offsetTop = getOffset(this.thead, 'offsetTop'); + var offsetTop = this.offsetTopOverride ? this.offsetTopOverride : getOffset(this.thead, 'offsetTop'); var offsetLeft = getOffset(this.thead, 'offsetLeft'); var classes = this.thead.className.split(' '); - if (this.stick !== true && (offsetTop - window.scrollY < 0)) { - this.stick = true; - this.treshold = offsetTop; - this.setWidth(); - this.thead.style.left = offsetLeft + 'px'; - this.thead.style.top = 0; - setTimeout(function () { - classes.push('lr-sticky-header'); - this.thead.style.position = 'fixed'; - this.thead.className = classes.join(' '); - }.bind(this), 0); + if (this.stick !== true) { + var scrollPosition = this.isWindowScroll ? this.scrollContainer.scrollY : this.scrollContainer.scrollTop; + if (offsetTop - scrollPosition < 0) { + this.stick = true; + this.treshold = offsetTop; + this.setWidth(); + this.thead.style.left = offsetLeft + 'px'; + this.thead.style.top = this.isWindowScroll ? 0 : this.scrollContainer.getBoundingClientRect().top + 'px'; + setTimeout(function () { + classes.push('lr-sticky-header'); + this.thead.style.position = 'fixed'; + this.thead.className = classes.join(' '); + }.bind(this), 0); + } } - if (this.stick === true && (this.treshold - window.scrollY > 0)) { - this.stick = false; - this.thead.style.position = 'initial'; - classes.splice(classes.indexOf('lr-sticky-header'), 1); - this.thead.className = (classes).join(' '); + if (this.stick === true) { + var scrollPosition = this.isWindowScroll ? this.scrollContainer.scrollY : this.scrollContainer.scrollTop; + if (this.treshold - scrollPosition > 0) { + this.stick = false; + this.thead.style.position = 'initial'; + classes.splice(classes.indexOf('lr-sticky-header'), 1); + this.thead.className = (classes).join(' '); + } } } }; - 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 +103,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 +121,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; }; }); - From 273c0100772672db3a53c1a74a7a5736424bd091 Mon Sep 17 00:00:00 2001 From: Martin Brennan Date: Mon, 21 Sep 2015 11:41:02 +1000 Subject: [PATCH 2/3] streamlined code to be more in line with master instead of latest bower release --- lrStickyHeader.js | 13 ++++++------- 1 file changed, 6 insertions(+), 7 deletions(-) diff --git a/lrStickyHeader.js b/lrStickyHeader.js index 96c3a50..81f4674 100644 --- a/lrStickyHeader.js +++ b/lrStickyHeader.js @@ -44,12 +44,12 @@ } }, eventListener: function eventListener () { - var offsetTop = this.offsetTopOverride ? this.offsetTopOverride : 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) { - var scrollPosition = this.isWindowScroll ? this.scrollContainer.scrollY : this.scrollContainer.scrollTop; + if (this.stick !== true && (offsetTop - scrollPosition < 0)) { if (offsetTop - scrollPosition < 0) { this.stick = true; this.treshold = offsetTop; @@ -64,8 +64,7 @@ } } - if (this.stick === true) { - var scrollPosition = this.isWindowScroll ? this.scrollContainer.scrollY : this.scrollContainer.scrollTop; + if (this.stick === true && (this.treshold - scrollPosition > 0)) { if (this.treshold - scrollPosition > 0) { this.stick = false; this.thead.style.position = 'initial'; From f8a3bac88254e0626eeed6e13b21ed16eb88c1b1 Mon Sep 17 00:00:00 2001 From: Martin Brennan Date: Mon, 21 Sep 2015 11:46:13 +1000 Subject: [PATCH 3/3] fixed double condition check --- lrStickyHeader.js | 32 ++++++++++++++------------------ 1 file changed, 14 insertions(+), 18 deletions(-) diff --git a/lrStickyHeader.js b/lrStickyHeader.js index 81f4674..3348a65 100644 --- a/lrStickyHeader.js +++ b/lrStickyHeader.js @@ -50,27 +50,23 @@ var scrollPosition = this.isWindowScroll ? this.scrollContainer.scrollY : this.scrollContainer.scrollTop; if (this.stick !== true && (offsetTop - scrollPosition < 0)) { - if (offsetTop - scrollPosition < 0) { - this.stick = true; - this.treshold = offsetTop; - this.setWidth(); - this.thead.style.left = offsetLeft + 'px'; - this.thead.style.top = this.isWindowScroll ? 0 : this.scrollContainer.getBoundingClientRect().top + 'px'; - setTimeout(function () { - classes.push('lr-sticky-header'); - this.thead.style.position = 'fixed'; - this.thead.className = classes.join(' '); - }.bind(this), 0); - } + this.stick = true; + this.treshold = offsetTop; + this.setWidth(); + this.thead.style.left = offsetLeft + 'px'; + this.thead.style.top = this.isWindowScroll ? 0 : this.scrollContainer.getBoundingClientRect().top + 'px'; + setTimeout(function () { + classes.push('lr-sticky-header'); + this.thead.style.position = 'fixed'; + this.thead.className = classes.join(' '); + }.bind(this), 0); } if (this.stick === true && (this.treshold - scrollPosition > 0)) { - if (this.treshold - scrollPosition > 0) { - this.stick = false; - this.thead.style.position = 'initial'; - classes.splice(classes.indexOf('lr-sticky-header'), 1); - this.thead.className = (classes).join(' '); - } + this.stick = false; + this.thead.style.position = 'initial'; + classes.splice(classes.indexOf('lr-sticky-header'), 1); + this.thead.className = (classes).join(' '); } } };