Impedire l'esecuzione di uno script al di sotto una certa media query

[Ines_88]

Salve a tutti,
spero di riuscire a spiegare bene quello che sto cercando di fare.

In pratica ho realizzato questo semplice menu che deve scomparire allo scroll-down del mouse e riapparire allo scroll-up ma tutto ciò deve avvenire solo nella versione mobile del sito, non in quella desktop.

Al momento nel mio markup è presente questo script che ovviamente però funziona sempre, non solamente quando la media query della width è impostata su al di sotto dei 480px.

	$(window).scroll(function() {
		if ($(this).scrollTop()>100)
     	{
        	$('.menu, .menu-hamb').fadeOut();
     	}
	else
     	{
      		$('.menu, .menu-hamb').fadeIn();
     	}
 	});

Leggendo in giro su questo forum ho trovato una soluzione che forse non ho compreso o riportato bene, a questo punto ve la scrivo vuota così come l'ho trovata, senza il pastrocchio inserito da me

var mql = window.matchMedia('@media all and (max-width: 500px)');
if(mql.matches) {
    // regola per larghezze superiori ai 500px
} else {
    // regola per larghezze inferiori ai 500px
}

Grazie a chi deciderà di aiutarmi nonostante questo caldo africano.
Che il fresco sia con voi!

[cavicchiandrea]

Qui https://developer.mozilla.org/it/doc...dow/matchMedia c'è un altro esempio prova quello

[Ines_88]

Qui https://developer.mozilla.org/it/doc...dow/matchMedia c'è un altro esempio prova quello

Sì, mi pare questa pagina mostri lo stesso codice postato da me... ok, ti faccio vedere come implemento il mio script all'interno del mio markup e mi dici tu dov'è che sbaglio, ok?

		
<script>
mql = window.matchMedia(mediaQueryString)		
	if (window.matchMedia("(max-width: 480px)").matches) {
		$(window).scroll(function() {
			if ($(this).scrollTop()>72)
     		{
       		$('.logo, .menu').fadeOut();
     		}
	} else {
		{
      		$('.logo, .menu').fadeIn();
     		}
	}
</script>

[cavicchiandrea]

Prova così da quello che vedo il tuo codice ha problemi sulle parentesi
codice:

<script>
mql = window.matchMedia(mediaQueryString)// questa variabile globale se non è necessaria meglio toglierla
if(window.matchMedia("(max-width: 480px)").matches){//apro if matchMedia
$(window).scroll(function(){//apro scroll
if($(this).scrollTop()>72){//apro if scrollTop
$('.logo, .menu').fadeOut();
}else{// else if scrollTop
$('.logo, .menu').fadeIn();
}// chiudo if scrollTop
})// chiudo scroll
}//chiudo if marchMedia
</script>

[Ines_88]

Ho appena provato e se lascio la prima stringa non succede niente, né su desktop né su mobile; se la tolgo siamo al punto di partenza, cioè le classi indicate scompaiono sempre allo scroll, anche sulla versione desktop

[cavicchiandrea]

Boh... andrebbe visto il contesto, prova a racchiudere tutto script nel onload