I have a navigation bar that should be visible only if the user scrolls up. Below is the code snippet that works fine for desktop.

$(window).scroll(function() {
 
    var scrollMovement = $(window).scrollTop();
   
    if (topPosition < 200 ){
    }
    else{
    if(scrollMovement > topPosition) {
          $('#main-header').removeClass('show-header');
          $('#main-header').addClass('hide-header');
    } else {
          $('#main-header').removeClass('hide-header');
          $('#main-header').addClass('show-header');
    }
    }
    topPosition = scrollMovement;
});

The above doesn't work on mobiles. I did check multiple similar questions on the forum and updated my codes, but no success. Below is what I have tried so far.

$(document.body).on('touchmove', onScroll); // for mobile 
$(window).on('scroll', onScroll); 

// callback
function onScroll(){ 
 
    var scrollMovement = $(window).scrollTop();
   
    if (topPosition < 200 ){
    }
    else{
    if(scrollMovement > topPosition) {
          $('#main-header').removeClass('show-header');
          $('#main-header').addClass('hide-header');
    } else {
          $('#main-header').removeClass('hide-header');
          $('#main-header').addClass('show-header');
    }
    }
    topPosition = scrollMovement;
};   

May I know what part I am not doing correctly?