Getting Waypoints Inview to work when scrolling on mobile

Question

I am using Waypoints Inview to detect when I scroll into a certain section of my website grab the background colour of the div in view check what colour it is then I'm outputting a class onto my nav to change the colour.

It works wonderfully on desktop but when it comes to mobile it only fires once the user has stopped scrolling which makes it look like it's not working properly. Now I know you can use 'touchmove' but I have no idea how to make that work with Waypoints Inview.

I am quite sure I have checked everywhere for an answer but can't seem to figure it out.

• Waypoints Inview Plugin

I've included a JSFiddle to show you a basic version of what I'm trying to accomplish how the nav changes so you can see it against the background. I just need a way of making it work on mobile devices straight away and not once you stop scrolling.

• JSFiddle Link

Thanks,

$('.section')
    .each(
      function(index){

        var wayPointsEl = $('.nav');
        var sectionObj = $(this);

        var inview = new Waypoint.Inview({
          element: sectionObj,
          enter: function(direction) {

            if(direction == 'up') {
              if(sectionObj.hasClass('dark')) {

                wayPointsEl.removeClass('dark');
                wayPointsEl.addClass('light');

              } else if(sectionObj.hasClass('light')) {

                wayPointsEl.removeClass('light');
                wayPointsEl.addClass('dark');

              }
            }
          },
          exit: function(direction) {

            if(direction == 'down') {
              if(sectionObj.hasClass('dark')) {

                wayPointsEl.removeClass('dark');
                wayPointsEl.addClass('light');

              } else if(sectionObj.hasClass('light')) {

                wayPointsEl.removeClass('light');
                wayPointsEl.addClass('dark');

              }
            }
          }
        });

     });