On scroll hasClass

Question

I'm creating a sort of slider that changes on scroll.

I want the background image to change first, then the text to become visible.

So I'm trying to use:

// Detect start of scroll
(function(event) {
var lastScrollTop = 0;

var lastScrollAt = Date.now()
  , timeout

function scrollStartStop(event) {
    var st = $(this).scrollTop();
    var $this = $(this)
 
    if (Date.now() - lastScrollAt > 100)
    if (st > lastScrollTop){
        $this.trigger('scrolldownstart')
    } else {
        $this.trigger('scrollupstart')
    }
       
      
    lastScrollAt = Date.now()
  
    clearTimeout(timeout)
  
    timeout = setTimeout(function() {
        if (Date.now() - lastScrollAt > 99)
        if (st > lastScrollTop){
            $this.trigger('scrolldownend')
        } else {
            $this.trigger('scrollupend')
        }
    }, 100)
    lastScrollTop = st;
    
}

$(document).on('scroll', scrollStartStop)



 })()

    $(document).on('scrolldownstart', function() {
// Make text visible if slide is in view
if ( $( '#slide-place-holder-'+index ).hasClass( "in-view" ) ) {
  $('#slide-place-holder-'+index).addClass('text-visible');
     };
// Move to next slide if text is visible
if ( $( '#slide-place-holder-'+index ).hasClass( "text-visible" ) ) {
  $('#slide-place-holder-'+index).addClass('hidden-slide');
  $('#slide-place-holder-'+index).removeClass('text-visible');

 
     
  $('#slide-place-holder-'+(index+1)).removeClass('hidden-slide');
  $('#slide-place-holder-'+(index+1)).addClass('in-view');
    };

But this is both adding the 'text-visible' and detecting the 'text-visible' it just added, so both are firing

I tried wrapping the detection of 'in-view' in a setTimeout to delay it looking for that, which works for the first slide, but thereafter it's adding both the 'in-view' and the 'text-visible' at the same time.