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.
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?
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é !
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).
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.
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
Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !
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
Lord Morpheus, Seigneur Morphée, Dieu Grecs des Songes, Fils de la Nuit et du Sommeil
Afficher un élément en fonction de la scrollbar
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
Lord Morpheus, Seigneur Morphée, Dieu Grecs des Songes, Fils de la Nuit et du Sommeil
Lord Morpheus, Seigneur Morphée, Dieu Grecs des Songes, Fils de la Nuit et du Sommeil
Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !
Lord Morpheus, Seigneur Morphée, Dieu Grecs des Songes, Fils de la Nuit et du Sommeil
Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !
Lord Morpheus, Seigneur Morphée, Dieu Grecs des Songes, Fils de la Nuit et du Sommeil