Skip to content

Instantly share code, notes, and snippets.

@wbashir
Created November 27, 2013 00:18
Show Gist options
  • Save wbashir/7668685 to your computer and use it in GitHub Desktop.
Save wbashir/7668685 to your computer and use it in GitHub Desktop.
WayPoints trigger on page holder bottom or when user scrolls to bottom of window
///Markup
<div id="st-container" class="st-container">
<div class=" fullscreen-container animated fadeInDown" id="fullscreen-container">
<div class=" custom_inner offset2" id="fullScreenAyahs">
<div class="pageHolder" id="">
</div>
<div class="pageHolder" id="">
</div>
</div>
</div>
</div>
//as the user scrolls the page down - the .pageHolder div gets added to bottom or top if the they scroll up.
//How to to only trigger when the scroll is all the way down or all the way up
var opts = {
offset: 'bottom-in-view',
loadingClass: 'infinite-loading'
}
//infinite scrolling
$('#st-container').waypoint(function (direction) {
var page = Number(SessionAmplify.get('currentQuranPage'));
if (direction === 'down') {
console.log('comes here again + down');
page++;
SessionAmplify.set('currentQuranPage', page);
SessionAmplify.set('quranPageChanged', true);
}
else if (direction === 'up') {
console.log('comes here again + up');
page--;
SessionAmplify.set('currentQuranPage', page);
SessionAmplify.set('quranPageChanged', true);
}
}, opts);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment