How to Hide Global Header While Scrolling Down & Reveal While Scrolling Up (with inverted colors and background)

Question

The code below does a nice job making the menu disappear on down scrolls > 200px from top of screen.

However, when scrolling back up the menu reappears as its original self. (I'm using white colored menu items, and they can be difficult or impossible to see further down the page where there may be whitespace.)

For visibility, I want the menu colors to reappear (during up-scrolls) as a dark color with a light colored background - until the top of page is reached at which point I want the original white-colored menu items back into effect.

I tried a Scroll Triggered CSS Animation Plug-In (in my Wordpress / Divi website), but that introduced new problems. Any advice on how to customize this code would be appreciated:

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

    #main-content{
    margin-top: 7vw;
    }
    
    .hide-header {
    opacity: 0;
    margin-top: -200px !important;
    }
     
    .show-header {
    opacity: 1;
    margin-top: 0px !important;
    }
     
    #global-header-section {
    -webkit-transition: all 0.5s ease !important;
    -moz-transition: all 0.5s ease !important;
    -o-transition: all 0.5s ease !important;
    -ms-transition: all 0.5s ease !important;
    transition: all 0.5s ease !important;
    }