Unset to "display: flex" in jQuery

Question

I would like to create a header/navbar, that is not visible in the first place, but appears as soon as the user scrolls down.

I´m using following CSS on my header:

@media (min-width: 1024px){
#header {
    display:none;   
    width:100%!important;
}
}

and jQuery:

jQuery(document).ready(function( $ ) {
    jQuery(window).scroll(function() {
      
      if ( $ (window).width() > 1024) {
       
        if ( $ (window).scrollTop() >= 100) {
            $ ('#header').fadeIn();
          } else {
            $ ('#header').fadeOut();
             }
      }
    });
});

So far it works, but unfortunately the header flexbox container will now unset to "display: block;" instead of "display: flex;". How can I unset it to "display: flex;" so that the layout is not messed up?

Thanks for your help.