Skip to content

Instantly share code, notes, and snippets.

@ryanschuhler
Last active December 18, 2015 19:48
Show Gist options
  • Save ryanschuhler/5835252 to your computer and use it in GitHub Desktop.
Save ryanschuhler/5835252 to your computer and use it in GitHub Desktop.
This script is used when a node has the class "on-screen-helper". When the node hits the bottom of the screen, it will add the class "on-screen-bottom" , when the node hits the top of the screen it will add the class "on-screen-top" and when the node has completely left the screen it removes both classes. This is useful for both timing animation…
AUI().use(
'aui-base',
function(A) {
var WIN = A.getWin();
var onScreenHelperNode = A.all('.on-screen-helper');
var updateOnScreen = function() {
var currentScrollPos = WIN.get('docScrollY');
var winHeight = WIN.get('innerHeight');
if (winHeight == undefined) {
winHeight = document.documentElement.clientHeight;
}
onScreenHelperNode.each(
function(item, index, collection) {
var dataOffsetBottom = parseInt(item.attr('data-offset-bottom'));
var dataOffsetTop = parseInt(item.attr('data-offset-top'));
var dataRepeatBottom = item.attr('data-repeat-bottom');
var dataRepeatTop = item.attr('data-repeat-top');
var topEdge = item.getY();
var topEdgeOffset = topEdge;
if (dataOffsetTop) {
topEdgeOffset = topEdgeOffset - dataOffsetTop;
}
var bottomEdge = topEdge + item.get('clientHeight');
var screenBottom = topEdge - winHeight;
if (dataOffsetBottom) {
screenBottom = screenBottom + dataOffsetBottom;
}
if ((currentScrollPos > topEdgeOffset) && (currentScrollPos <= bottomEdge)) {
item.addClass('on-screen-top');
}
else if (dataRepeatTop == "true") {
item.removeClass('on-screen-top');
}
if ((currentScrollPos > screenBottom) && (currentScrollPos <= bottomEdge)) {
item.addClass('on-screen-bottom');
}
else if (dataRepeatBottom == "true") {
item.removeClass('on-screen-bottom');
}
}
);
};
if (!onScreenHelperNode.isEmpty()) {
A.on('scroll', updateOnScreen);
A.on('resize', updateOnScreen);
updateOnScreen();
}
}
);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment