11484 sujets

JavaScript, DOM et API Web HTML5

Menu Sticky apparaît/disparaît au scroll

Bonjour,

Je suis nouveau dans le monde du dev et c'est la première fois que je post sur un forum d'entraide Smiley biggrin

Je crée un site "vitrine" pour une boite de communication, elle veut un menu header avec uniquement leur logo et un menu burger à gauche qui ouvre la nav. Elle veut également que son menu disparaisse quand on scroll vers le bas et réapparaît quand on scroll vers le haut : jusque là tout vas bien.

Voici mon problème : J'ai une classe "nav-is-stuck" qui est nativement présent dans mon code et qui à pour fonction d'être présent quand on scroll vers le haut (et donc de faire apparaître le menu) et de disparaître quand on scroll vers le bas. Sauf que j'ai besoin que cette classe "nav-is-stuck" ne commence qu'a disparaître a partir d'un certain endroit dans mon code pour laisser le menu apparent quand l'utilisateur est en haut du site.

Je ne sais pas si je suis bien clair, je vous joint le code HTML


<!DOCTYPE html>
<html lang="fr" class="nav-is-stuck">

<header id="header" role="banner">
        <div class="menu-wrap">
            <input type="checkbox" onchange="changeColorToggle(this) "class="toggler">
            <div class="hamburger">
                <div></div>
            </div>
            <div class="menu">
                <div>
                    <div>
                        <ul>
			    <li><a href="#">Accueil</a></li>
                            <li><a href="#">Notre Savoir-faire</a></li>
                            <li><a href="#">Nos réalisations</a></li>
                            <li><a href="#">L' équipe</a></li>
                            <li><a href="#">Contact</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <a href="#"><img class="logo-cynes" src="/assets/img/CYNES-logo-noir.png" alt="Logo Cynes"></a>
    </header>


Et le code JS pour gérer le scroll


(function scroll(w, d) 
{
	var el_html = d.documentElement,

		el_body = d.getElementsByTagName('body')[0],
		header = d.getElementById('header'),
		lastScroll = w.pageYOffset || el_body.scrollTop,
		menuIsStuck = function (triggerElement, wScrollTop, lastScroll) 
		{
				regexp = /(nav\-is\-stuck)/i,
				classFound = el_html.className.match(regexp),
				navHeight = header.offsetHeight,
				bodyRect = el_body.getBoundingClientRect(),
				scrollValue = triggerElement ? triggerElement.getBoundingClientRect().top - bodyRect.top - navHeight : 0;

			if (wScrollTop > scrollValue && !classFound && wScrollTop < lastScroll) 
			{
				el_html.className = el_html.className + 'nav-is-stuck';
				el_body.style.paddingTop = navHeight + 'px';
			}

			if (classFound && wScrollTop > lastScroll) 
			{
				el_html.className = el_html.className.replace(regexp, '');
				el_body.style.paddingTop = '0';
			}

		},
		onScrolling = function () 
		{
			var wScrollTop = w.pageYOffset || el_body.scrollTop;
			menuIsStuck(d.querySelector('header'), wScrollTop, lastScroll);
			lastScroll = wScrollTop;
		};

	w.addEventListener('scroll', function () 
	{
		
		if (document.querySelector('.toggler').checked == false)
		w.requestAnimationFrame(onScrolling);
	});

}(window, document));


Merci d'avance pour votre aide ... je suis un peu désemparé ...

Cordialement
Cyril
Modifié par Cyril06750 (15 Jan 2021 - 18:10)
Modérateur
Bonjour,

1) La réponse dépend (probablement) du css utilisé.

Il faudrait que tu fasse un exemple minimal sur codepen ou jsfiddle par exemple, ou que tu postes ici le css utilisé.

2) C'est quand même un peu un jeu de devinette. En particulier que veut dire : "Sauf que j'ai besoin que cette classe "nav-is-stuck" ne commence qu'à disparaître à partir d'un certain endroit dans mon code pour laisser le menu apparent quand l'utilisateur est en haut du site."

- faut-il supposé que le menu est montré/caché selon que la checkbox est cochée ou pas? (je suppose que oui) Et faut-il comprendre que le menu n'est caché que si la checkbox est cochée ET que la classe "nav-is-stuck" est présente ? Ou bien que la classe "nav-is-stuck" n'est plus présente ?

- que veut dire "cette classe 'nav-is-stuck' ne commence qu'à disparaître" ? Cela signifie-t-il qu'il faut juste la retirer de la liste des classes de body ? Mais alors que veut dire "à partir d'un certain endroit dans mon code" ? J'ai beau relire 10 fois la phrase, je ne vois pas comment interpréter le "un certain endroit dans mon code".

- le menu doit-il n'être montré que si l'utilisateur est vraiment tout en haut de la page, ou bien y-t-il une tolérance ? Est-ce lié à l'énigmatique "à partir d'un certain endroit dans mon code" ? Et si oui, quels sont les critères pour définir l'endroit à partir duquel il faut cacher le menu ?

J'imagine qu'une partie des réponses est dans le script js que tu donnes. Mais si tu poses la question, c'est que ton script ne marche pas. Du coup, difficile d'en déduire les critères avec précision ou en y passant pas mal de temps.

Amicalement,
Meilleure solution
Modérateur
Bonjour,

Au cas où (mais je ne suis vraiment pas certain d'avoir compris la question) :

header {position:relative;}
.menu-wrap,.hamburger {display:inline-block;}
.menu {display:none;position:absolute;background:#fed;}
.nav-is-stuck .toggler:checked~.menu {display:block;}



(function scroll(w, d) 
{
	w.addEventListener('scroll', function () 
	{
		if(w.pageYOffset>d.querySelector('header').offsetHeight)
			d.documentElement.classList.remove("nav-is-stuck");
		else d.documentElement.classList.add("nav-is-stuck");
	});
}(window, document));

Amicalement,
Sujet clos
Aller à