Skip to content
This repository was archived by the owner on Aug 22, 2022. It is now read-only.

added options to be able to set the scrollContainer and an offsetTopOverride value #2

Open
martin-brennan-csnet wants to merge 3 commits into
base: master
Choose a base branch
from
Open

added options to be able to set the scrollContainer and an offsetTopOverride value #2

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
1b0520b
added options to be able to set the scrollContainer and an offsetTop …
martin-brennan-csnet Sep 21, 2015
273c010
streamlined code to be more in line with master instead of latest bow…
martin-brennan-csnet Sep 21, 2015
f8a3bac
fixed double condition check
martin-brennan-csnet Sep 21, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 20 additions & 12 deletions lrStickyHeader.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,24 +44,25 @@
}
},
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';
this.thead.className = classes.join(' ');
}.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);
Expand All @@ -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');
}
Expand All @@ -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;
Expand All @@ -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;
};
});