Erreur script et match media

Bonjour,

je créé actuellement un site pour appliquer ce que j'apprends au quotidien. Et petit soucis, j'ai un script qui fixe mon menu en fonction du scroll, mais je voudrais maintenant créer un menu spécial en fonction d'un breakpoint (histoire d'être plus intéressant sur mobile).

Problème, le match media ne fonctionne pas sur le script qui fixe mon menu, quand je ne mets rien dans else, le script ne se fait pas du tout, et quand je met removeclass il effectue le script sans tenir compte du match media...

www.martinfrancois.fr

if (window.matchMedia("(min-width: 875px)").matches) { 
// 1er code
$(function (){
 // On recupere la position du bloc par rapport au haut du site
 var position_top_raccourci = $("header").offset().top;
 
 //Au scroll dans la fenetre on déclenche la fonction
 $(window).scroll(function () {
 
 //si on a defile de plus de 150px du haut vers le bas
 if ($(this).scrollTop() > position_top_raccourci) {
 
 //on ajoute la classe "fixNavigation" a <div id="navigation">
 $("header").addClass("fixNavigation"); 
 } else {
 
 //sinon on retire la classe "fixNavigation" a <div id="navigation">
 $("header").removeClass("fixNavigation");
 }
 });
 })
} else {
    $("header").removeClass("fixNavigation");
}
// 2ème code
 (function($){

    /* Quand je clique sur l'icône hamburger je rajoute une classe au body */
    $('#header__icon').click(function(e){
        e.preventDefault();
        $('body').toggleClass('with--sidebar');
    });

    /* Je veux pouvoir masquer le menu si on clique sur le cache */
    $('#site-cache').click(function(e){
        $('body').removeClass('with--sidebar');
    })

})(jQuery); 

ps: les codes viennent de 2 sites différents et je les comprends grossièrement sans réussir à les reproduire par moi-même.