Discussion :

[itaff]

Salut, pourriez-vous m'aider à intégrer ce code à un site uniquement dans sa version mobile, en y ajoutant la fonction "resize" ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
$(window).resize(function(){
	if ($(window).width() <= 400){	
		// do something here
	}	
});

dans sa version desktop, #navbar demeure visible, position fixe, mais disparait au scroll vertical à partir de 400 px

[Geoffrey74]

Salut,

je t'avoue ne pas avoir compris ta demande.

Par rapport au code que tu nous donnes (la navbar qui apparait en scrollant), que souhaite tu faire ?

[itaff]

désolé si ma demande est un peu confuse

J’aimerai en fait que la navbar disparaisse en glissant hors de l’ecran si l’utilisateur est sur iPhone, en dehors de cette condition (version desktop) la navbar conserve son style initial (fixed). J’ai essayé de bidouiller avec la fonction resize et la condition if/else, sans succès : la navbar disparaît bien au scrollbottom quand je réduis la fenêtre à < 400 mais disparaît encore quand j’aggrandi sa largeur > 400, je dois actualiser la page pour avoir la position voulue en version desktop.

[Doksuri]

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

@media only screen and (max-device-width: 400px), only screen and (max-width: 400px) { ... }

[itaff]

Avec cette solution des mediaquerries, il me faudrait deux menus, un "desktop", un "mobile", et gérer la visibilité de l'un ou l'autre selon la largeur, avec un display n'est ce pas ?

Je cherche plutot une solution orientée javascript, par exemple avec ce code, le header disparait au scroll, ce dernier remplace une class par une autre pour provoquer la disparition du header, c'est parfait, seulement, si j'ajoute la fonction resize :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
$(window).resize(function(){
	if ($(window).width() <= 480){	
		// do something here
	}	
});

pour que le header disparaisse seulement avec une largeur inférieure à 480 par ex (sur mobile en gros), j'obtiens l'effet désiré quand je réduis la fenêtre, seulement je dois compléter cette condition if, avec else pour indiquer qu'à partir de 481 et au delà (version desktop), le header ne disparaisse plus au scroll sur la fenêtre...compliqué je sais

[psychadelic]

Avec cette solution des mediaquerries, il me faudrait deux menus, un "desktop", un "mobile", et gérer la visibilité de l'un ou l'autre selon la largeur, avec un display n'est ce pas ?

Non, utiliser les média query n'interdit pas de re-manipuler par la suite un objet html en lui collant une classe selon les circonstances.

[NoSmoking]

Bonjour,

(...) seulement je dois compléter cette condition if, avec else pour indiquer qu'à partir de 481 et au delà (version desktop), le header ne disparaisse plus au scroll sur la fenêtre...compliqué je sais

en quoi est-ce compliqué ?