WayPoints trigger on page holder bottom or when user scrolls to bottom of window

gistfile1.js

 ///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);