11521 sujets

JavaScript, DOM et API Web HTML5

Media Queries dans un If

Bonsoir,

Je viens solliciter votre aide. Je m'attaque à la partie des Media Queries de mon site Web, et je voulais savoir s'il était possible d'insérer des conditions sur le "if" uniquement, du code ci-dessous, au lieu de devoir réécrire la fonctionne complète plusieurs fois en changeant les min-width et max-width.
En gros j'aimerais pouvoir changer le "350px" selon les dimensions de l'utilisateurs, sans avoir à créer plusieurs fois la même fonction et de définir la résolution dans : var scroll = "(window).scrollTop(ici);

$(window).scroll(function() {    
	var action = document.getElementById('btn');
	var scroll = $(window).scrollTop();
		if (scroll >= 350) {
			$("#sous_menu").addClass("fixed"); $("#sous_menu a").addClass("color-menu");
			$(".nav_button div").addClass("fixed_button");
			document.getElementById('btn').style.visibility="visible";
         	} 
               else {
		$("#sous_menu").removeClass("fixed"); $("#sous_menu a").removeClass("color-menu");
			$(".nav_button div").removeClass("fixed_button");
			document.getElementById('btn').style.visibility="hidden";
		}
});




J'en profite pour vous poser une deuxième question :
Dans ma fonction suivante, quand j'appuie sur le bouton, et que mon sous-menu est visible, celui-ci devient invisible; puis quand j'appuie sur le bouton, et que mon sous-menu est invisible, celui-ci devient visible.
Cependant, j'aimerais que si "scroll <= 350", le sous-menu redevienne visible automatiquement.
Comment faire ?
Voici mon code :

$(document).ready(function() {
var action = document.getElementById('btn');
	action.addEventListener("click", function()
		{
		     var etat = document.getElementById('sous_menu').style.visibility;
				if(etat=="hidden"){
					document.getElementById('sous_menu').style.visibility="visible";
				}
				else{
					document.getElementById('sous_menu').style.visibility="hidden";
				}				
		}, true);	
});

Modifié par flox (02 Dec 2016 - 21:57)
Administrateur
Bonjour,

flox a écrit :
En gros j'aimerais pouvoir changer le "350px" selon les dimensions de l'utilisateurs,

Veux-tu dire en pourcentage de la hauteur de la fenêtre de l'utilisateur (50% donnerait ~500px sur un 1920x1080, 512 sur un iPad en orientation portrait mais 384 en paysage) ?
Tu peux combiner .matchMedia() (MDN) et une condition sur la hauteur avec une unité relative comme vh : 50vh c'est la moitié de la hauteur de la fenêtre/du device car 100vh = sa hauteur.
Les 2 sont supportés depuis IE9 donc pas de souci.

Tu peux te contenter d'ajouter et supprimer une seule classe (sur un parent commun, body par ex) dans ce if() else et réagir en CSS à la présence ou l'absence de cette classe dans une vraie MQ pour le coup.
Si la classe c'est .has-scrolled :

#sous_menu { position: relative; /* (?) */}
#sous_menu a { color: qqch; }
.nav_button div  { position: relative; /* (? et d'autres styles que .button) */}
#btn { visibility: hidden }

.has-scrolled #sous_menu { position: fixed; }
.has-scrolled #sous_menu a { color: autreChose; }
.has-scrolled .nav_button div  { position: fixed; /* (et les styles de .button) */}
.has-scrolled #btn { visibility: visible }

Modifié par Felipe (03 Dec 2016 - 04:24)
Bonjour,

Merci pour tes explications Felipe. J'ai appliqué tes conseils concernant l'ajout d'une classe sur un parent commun tel que body.

Par contre, je me demandais. Au lieu de devoir revoir mes dimensions en Vh, est-ce qu'il n'y aurait pas une solution pour que :

- Au lieu de devenir fixe quand on est à scroll > 350, mon sous-menu le devienne plutôt après avoir dépassé le bloc qui le précède ? De cette façon, peut importe si je change les dimensions des blocs le précédant, cela fonctionnerait.
Modifié par flox (03 Dec 2016 - 13:54)
Administrateur
Ah oui, j'ai eu à déboguer un script qui était censé faire ça.
Il te faut détecter quand le bas du bloc précédent sort du viewport mais comme aucune des 2 infos n'est directement disponible, cela revient à faire :

1/ posBas = Position basse du bloc précédent = position du haut de ce bloc + sa hauteur
2/ skrollOfenstrut = Position actuelle du scroll
3/ Comparer les 2, quand posBas < skrollOfentstrut (bah le bloc est entièrement sorti de l'écran) alors tu veux passer ton sous-menu en position: fixed. Et inversement quand ce n'est plus le cas
Modifié par Felipe (03 Dec 2016 - 17:37)
J'ai vraiment très peu de connaissances en JavaScript, donc j'ai essayé avec ce que je connaissais.
J'ai fais ça :

var scroll = $(window).scrollTop();				
var menuTop = $("#sous_menu").offset().top;
	if (scroll >= menuTop) {



Du coup ça marche bien pour le if, mais pas le else, je comprends pas.
Modifié par flox (03 Dec 2016 - 18:06)
Sujet clos
Aller à