Skip to content

Commit

Permalink
now watching for vertical layout changes
Browse files Browse the repository at this point in the history
  • Loading branch information
@wilddeer
wilddeer committed Jun 18, 2014
1 parent c7d0583 commit ee3a604
Show file tree
Hide file tree
Showing 4 changed files with 86 additions and 26 deletions.
39 changes: 33 additions & 6 deletions dist/stickyfill.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,8 @@
scroll,
initialized = false,
html = doc.documentElement,
noop = function() {};
noop = function() {},
checkTimer;

//test getComputedStyle
if (!win.getComputedStyle) {
Expand Down Expand Up @@ -65,12 +66,13 @@

function onScroll() {
if (win.pageXOffset != scroll.left) {
scroll.left = win.pageXOffset;
updateScrollPos();
rebuild();
return;
}

if (win.pageYOffset != scroll.top) {
scroll.top = win.pageYOffset;
updateScrollPos();
recalcAllPos();
}
}
Expand Down Expand Up @@ -99,10 +101,21 @@
}
}

//checks whether stickies start or stop positions have changed
function fastCheck() {
for (var i = watchArray.length - 1; i >= 0; i--) {
if (getDocOffsetTop(watchArray[i].clone) - watchArray[i].docOffsetTop >= 2 ||
watchArray[i].parent.node.offsetHeight - watchArray[i].parent.height >= 2) return false;
}
return true;
}

function initElement(el) {
if (!el.clone) clone(el);
el.parent.node.style.position = 'relative';
if (!el.numeric.zIndex) el.node.style.zIndex = 999;
el.docOffsetTop = getDocOffsetTop(el.node);
el.parent.height = el.parent.node.offsetHeight;
}

function deinitElement(el) {
Expand Down Expand Up @@ -185,8 +198,6 @@
el.node.parentNode.insertBefore(el.clone, refElement);

if (el.cell) el.clone.appendChild(el.node);

return el.clone;
}

function killClone(el) {
Expand Down Expand Up @@ -270,7 +281,6 @@
height: nodeOffset.win.bottom - nodeOffset.win.top,
mode: -1,
parent: parent,
clone: undefined,
limit: {
start: nodeOffset.doc.top - numeric.top,
end: parentOffset.doc.top + parentNode.offsetHeight - parent.numeric.borderBottomWidth -
Expand All @@ -281,6 +291,17 @@
return el;
}

function getDocOffsetTop(node) {
var docOffsetTop = 0;

while (node) {
docOffsetTop += node.offsetTop;
node = node.offsetParent;
}

return docOffsetTop;
}

function getElementOffset(node) {
var box = node.getBoundingClientRect();

Expand All @@ -306,6 +327,10 @@
win.addEventListener('resize', rebuild);
win.addEventListener('orientationchange', rebuild);

checkTimer = setInterval(function() {
!fastCheck() && rebuild();
}, 500);

initialized = true;
}

Expand All @@ -328,6 +353,8 @@
win.removeEventListener('resize', rebuild);
win.removeEventListener('orientationchange', rebuild);

clearInterval(checkTimer);

initialized = false;
}

Expand Down
2 changes: 1 addition & 1 deletion dist/stickyfill.min.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

39 changes: 33 additions & 6 deletions src/stickyfill.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,8 @@
scroll,
initialized = false,
html = doc.documentElement,
noop = function() {};
noop = function() {},
checkTimer;

//test getComputedStyle
if (!win.getComputedStyle) {
Expand Down Expand Up @@ -58,12 +59,13 @@

function onScroll() {
if (win.pageXOffset != scroll.left) {
scroll.left = win.pageXOffset;
updateScrollPos();
rebuild();
return;
}

if (win.pageYOffset != scroll.top) {
scroll.top = win.pageYOffset;
updateScrollPos();
recalcAllPos();
}
}
Expand Down Expand Up @@ -92,10 +94,21 @@
}
}

//checks whether stickies start or stop positions have changed
function fastCheck() {
for (var i = watchArray.length - 1; i >= 0; i--) {
if (getDocOffsetTop(watchArray[i].clone) - watchArray[i].docOffsetTop >= 2 ||
watchArray[i].parent.node.offsetHeight - watchArray[i].parent.height >= 2) return false;
}
return true;
}

function initElement(el) {
if (!el.clone) clone(el);
el.parent.node.style.position = 'relative';
if (!el.numeric.zIndex) el.node.style.zIndex = 999;
el.docOffsetTop = getDocOffsetTop(el.node);
el.parent.height = el.parent.node.offsetHeight;
}

function deinitElement(el) {
Expand Down Expand Up @@ -178,8 +191,6 @@
el.node.parentNode.insertBefore(el.clone, refElement);

if (el.cell) el.clone.appendChild(el.node);

return el.clone;
}

function killClone(el) {
Expand Down Expand Up @@ -263,7 +274,6 @@
height: nodeOffset.win.bottom - nodeOffset.win.top,
mode: -1,
parent: parent,
clone: undefined,
limit: {
start: nodeOffset.doc.top - numeric.top,
end: parentOffset.doc.top + parentNode.offsetHeight - parent.numeric.borderBottomWidth -
Expand All @@ -274,6 +284,17 @@
return el;
}

function getDocOffsetTop(node) {
var docOffsetTop = 0;

while (node) {
docOffsetTop += node.offsetTop;
node = node.offsetParent;
}

return docOffsetTop;
}

function getElementOffset(node) {
var box = node.getBoundingClientRect();

Expand All @@ -299,6 +320,10 @@
win.addEventListener('resize', rebuild);
win.addEventListener('orientationchange', rebuild);

checkTimer = setInterval(function() {
!fastCheck() && rebuild();
}, 500);

initialized = true;
}

Expand All @@ -321,6 +346,8 @@
win.removeEventListener('resize', rebuild);
win.removeEventListener('orientationchange', rebuild);

clearInterval(checkTimer);

initialized = false;
}

Expand Down
32 changes: 19 additions & 13 deletions test/index.htm
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@
padding: 0.5em;
background: #69A9D3;
border-radius: 0.5em;
z-index: 10;
z-index: 5000;
}

.arrows button {
Expand Down Expand Up @@ -803,22 +803,28 @@ <h2><code>div {box-sizing: border-box; margin: 3em; border: 5px}</code> (static)
<script src="../src/stickyfill.js"></script>

<script>
$('.sticky').Stickyfill();
$(function() {
$('.sticky').Stickyfill();

$('.js-top').on('mousedown', function() {
window.scrollTo((document.documentElement.scrollLeft || document.body.scrollLeft), (document.documentElement.scrollTop || document.body.scrollTop)-1);
});
$('p').on('click', function() {
$(this).after($(this).clone());
});

$('.js-left').on('mousedown', function() {
window.scrollTo((document.documentElement.scrollLeft || document.body.scrollLeft)-1, (document.documentElement.scrollTop || document.body.scrollTop));
});
$('.js-top').on('mousedown', function() {
window.scrollTo((document.documentElement.scrollLeft || document.body.scrollLeft), (document.documentElement.scrollTop || document.body.scrollTop)-1);
});

$('.js-right').on('mousedown', function() {
window.scrollTo((document.documentElement.scrollLeft || document.body.scrollLeft)+1, (document.documentElement.scrollTop || document.body.scrollTop));
});
$('.js-left').on('mousedown', function() {
window.scrollTo((document.documentElement.scrollLeft || document.body.scrollLeft)-1, (document.documentElement.scrollTop || document.body.scrollTop));
});

$('.js-right').on('mousedown', function() {
window.scrollTo((document.documentElement.scrollLeft || document.body.scrollLeft)+1, (document.documentElement.scrollTop || document.body.scrollTop));
});

$('.js-bottom').on('mousedown', function() {
window.scrollTo((document.documentElement.scrollLeft || document.body.scrollLeft), (document.documentElement.scrollTop || document.body.scrollTop)+1);
$('.js-bottom').on('mousedown', function() {
window.scrollTo((document.documentElement.scrollLeft || document.body.scrollLeft), (document.documentElement.scrollTop || document.body.scrollTop)+1);
});
});
</script>
</body>
Expand Down

0 comments on commit ee3a604

Please sign in to comment.