Bonjour à toutes et à tous,

J'ai commencé le cours concernant la réalisation d'un site web grâce à HTML5 et CSS3 il y quelques semaines et je me suis retrouvé coincé quant à la création d'un menu. Le problème est le suivant :

J'ai créé un menu positionné en absolute "en haut de la page. Il "disparait" donc dès que l'utilisateur le dépasse (normal, c'est exactement ce que je recherche). Je voudrais que, lorsque la scrollbar de l'utilisateur dépasse un certain point (par exemple 600px), un second menu apparaisse, différent du premier, et positionné à un endroit différent.

Je me suis suffisamment renseigné pour savoir qu'il faut passer par JQuery, voire Java Script. Je n'ai actuellement pas le temps d'apprendre ces deux langages. Je sais qu'il existe une propriété en JQuery qui permet d'afficher ou non un élément (ou alors qu'il est possible d'ajouter une classe à un élément et, de ce fait, modifier dans la partie CSS l'élément possédant cette classe). J'ai beau afficher le code source de certains sites qui ont ce système de menu, je n'arrive pas à comprendre l'intégralité de la fonction utilisée.

Alède mesdames et messieurs !

-
Edité par Krodilock 27 juillet 2017 à 9:38:05

Bonjour,

Tu as clairement ciblé ton besoin, passer par du Javascript. Dans ce cas, pourquoi t'être trompé de forum? Pourquoi ne pas demander dans le section Javascript du forum?

Il existe la position sticky en css : https://caniuse.com/#search=sticky qui pourrai répondre à ton besoin, en partie.

Bonjour et merci de ta réponse.

J'ai hésité à poster dans le forum JavaScript, mais étant donné que j'ai vu pas mal d'exemples de ces menus en JQuery (bien que JQuery ~ JS), je ne savais pas où poster. Désolé si je me suis trompé !

Lord Morpheus a écrit:

Il existe la position sticky en css : https://caniuse.com/#search=sticky qui pourrai répondre à ton besoin, en partie.

Effectivement, la position sticky sera utilisée pour bloquer le menu sur la fenêtre. Le problème est de savoir comment faire apparaître le menu à la position souhaité. Je pensais à rajouter la class .fixed dès que la scrollbar dépasse 600px par exemple et, en parallèle, modifier l'apparence de mon menu.fixed dans le fichier css (et donc d'y mettre la position sticky).

-
Edité par Krodilock 27 juillet 2017 à 10:41:56

Ta logique est correct. A toi de la réaliser en JS maintenant (en passant par Jquery pour plus de facilité)

Oubli donc la position sticky, fixed suffira pour ton besoin.

Voici une fonction rapide qui te permet ça :

$(document).on('scroll',function (){
	var TopDoc = $(window).scrollTop();
	if(TopDoc >= 600){
		$('nav').css("position","fixed");
	} else{
		$('nav').css("position","absolute");
	}
});

$(window).scroll(function()
{
	var window_height,scroll_top;
        window_height = $(window).height();
	scroll_top = $(window).scrollTop();

	var $nav_bar = $('#nav-bar');

	if((window_height - $nav_bar.height()) <= scroll_top)
	{
	        if(!$nav_bar.hasClass('fixed')
	        {
                        $nav_bar.addClass('fixed');
	        };
	};

});

Je n'ai que les connaissances de base de la programmation donc voilà ce que je comprends de ce programme :

• On définit deux variables (window_height et scroll_top)
• On affecte la valeur de la hauteur de la fenêtre ( $(window).height() ) à la variable window_height
• On affecte la valeur de la position de la scrollbar ( $(window).scrolltop() ) à la variable scroll_top
• On affecte la valeur #nav-bar (qui correspond au menu dans le fichier HTML) à la variable $nav_bar
• Si la valeur de la différence entre la hauteur de la fenêtre de la hauteur de #nav_bar ( $nav_bar.height() ) est inférieure ou égale à la valeur de la position de la scrollbar alors, si #nav_bar ne possède pas la class fixed, on lui rajoute la class fixed. Sinon, on ne fait rien.

Je me demande alors si, en adaptant cette fonction, la suivante pourrai marcher :

$(window).scroll(function()
{
	var hauteur = 600;
	var scroll_top = $(window).scrollTop(); 
	var $menu1 = $('#menu1');
	var $menu2 = $('#menu2');
	$menu2.hide();

	if((scroll_top >= hauteur)
	{
	        $menu1.hide();
                $menu2.show();
	};

});

• On définit variables et on leur affecte des valeurs (sur le même modèle que précédemment)
• On cache le menu2
• Si la position de la scrollbar est supérieure à la hauteur (dont on a définit la valeur plus tôt), alors on cache le menu1 et on affiche le menu2

A priori, cela devrait fonctionner ? J'attends ta réponse avec impatience.

-
Edité par Krodilock 27 juillet 2017 à 14:59:40

Salut,

https://github.com/EmmanuelBeziat/izzi-sticky 

Hello rhooManu,

L'auth a eu un problème avec le topic, j'ai résolu le problème en MP avec lui.

Voici où nous nous sommes arrêté et qui correspond à son besoin : https://jsfiddle.net/vzdy73je/

-
Edité par Lord Morpheus 27 juillet 2017 à 17:14:42

Ok

Par contre il faut améliorer un peu le JS ; là il va exécuter la condition à chaque scroll (ce qui est très lourd), même si la classe est déjà présente ; il faut vérifier en plus si la classe est déjà présente (ou absente), afin que l'ajout / suppression de classe ne se fasse qu'une seule fois.

-
Edité par EmmanuelBeziat 27 juillet 2017 à 18:00:39

rhooManu a écrit:

Ok

Par contre il faut améliorer un peu le JS ; là il va exécuter la condition à chaque scroll (ce qui est très lourd), même si la classe est déjà présente ; il faut vérifier en plus si la classe est déjà présente (ou absente), afin que l'ajout / suppression de classe ne se fasse qu'une seule fois.

-
Edité par rhooManu il y a environ 1 heure

C'est là où ma non connaissance en la matière (JS) pêche! Je sais bricoler mais pas optimiser!

Mais tu as raison, je laisse à l'auth le soin d'optimiser avec le if hasClass qui vas bien