Menu static avec du javascipt

27 septembre 2022 à 16:43:56

Aidez moi a trouver l'erreur le code semble etre correct mais ne marche pas

code html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>BAHAAU TECH</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<header>
		<a href="#" class="logo">BAHAAU TECH <span>...</span></a>
		<ul class="navigation">
			<li><a href="#banner">Acceuil</a></li>
			<li><a href="#banner">Bahaau</a></li>
			<li><a href="#banner">Boutique</a></li>
			<li><a href="#banner">Notre Blog</a></li>
			<li><a href="#banner">Contact</a></li>
		</ul>
	</header>
	<section class="banner" id="banner">
		<div class="content">
			<h2>Always chooose GOD</h2>
			<p>Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Ipsa quam eos, modi asperiores eligendi. Officiis aliquam magnam, deserunt quaerat qui.</p>
			<a href="#" class="btn">Our Menu</a>

		</div>
	</section>
	<script type="text/javascript">
		window.addEventListener('scroll', function(){
			const header = document.querySelector('header');
			header.classList.toggle("sticky", window.scroll Y > 0);
		});
	</script>
</body>
</html>

code css

@import url('https://fonts.googleapis.com/css?family=Poppins:200;0,300;0,400;500;600;700;800;900&display=swap');

*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: 'Poppins',sans-serif;
}
p{
	font-weight: 300;
	color: #111;
}
body{
	min-height: 1000px;
}
.banner{
	position: relative;
	width: 100%;
	min-height:100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	background:url(images/banner.jpg);
	background-size: cover;
}

.banner .content{
	width: 900px;
	text-align: center;
}

.banner .content h2{
	color: #fff;
	font-size: 5em;
}
.banner .content p{
	color: #fff;
	font-size: 1em;
}

.btn{
	font-size: 1em;
	color:#fff;
	background:#2ab541;
	text-decoration: none;
	display: inline-block;
	padding:10px 30px;
	margin-top: 20px;
	text-transform: uppercase;
	text-decoration: none;
	letter-spacing: 2px;
	transition: 0.5s;
}

.btn:hover
{
	letter-spacing: 6px;
}
header{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	padding: 40px 100px;
	z-index: 10000;
	display: flex;
	justify-content: space-between;
	align-items: center;
	transition: 0.5s;
}

header .sticky{
	background:#fff;
	padding: 10px 100px;
	box-shadow: 0 5px 20px rgba(0,0,0,0.05);
}

header .logo{
	color : #fff;
	font-weight: 700;
	font-size: 2em;
	text-decoration: none;
}
header .sticky .logo{
	color:#111;
}

header .logo span{
	color:#ff0157;
}

header .navigation {
	position: relative;
	display: flex;
}

header .navigation  li{
	list-style: none;
	margin-left: 30px;
}

header .navigation li a{
	text-decoration: none;
	color:#fff;
	font-weight: 300;
}

header .sticky .navigation li a{
	color: #111;
}

merci pour votre aide

Domi65

27 septembre 2022 à 21:30:16

Hello !

window.scroll Y n'existe pas, maiswindow.scrollY oui.

Cordialement

-
Edité par Domi65 27 septembre 2022 à 21:32:09

Benjamin1206

28 septembre 2022 à 11:25:34

ça ne marche pas je veux de l'aide toujours

Benjamin1206

1 octobre 2022 à 8:44:28

salt la communauté je suis toujours en attente de l'aide

Lamecarlate

1 octobre 2022 à 8:55:42

Bonjour,

Le message qui suit est une réponse automatique activée par un membre de l'équipe. Les réponses automatiques leur permettent d'éviter d'avoir à répéter de nombreuses fois la même chose, ce qui leur fait gagner du temps et leur permet de s'occuper des sujets qui méritent plus d'attention.
Nous sommes néanmoins ouverts et si vous avez une question ou une remarque, n'hésitez pas à contacter la personne en question par Message Privé.
Pour plus d'informations, nous vous invitons à lire les règles générales du forum

Manque de précisions

Vous êtes ici sur un forum d'entraide communautaire et non pas sur un forum de demande de service, le but n'est donc pas de fournir une réponse toute faite ou de directement fournir la solution à quiconque viendrait sans la moindre trace. Afin d'obtenir de l'aide et une solution à votre problème, il est fortement recommandé de présenter clairement l'état actuel du problème en nous fournissant :

Un descriptif clair et précis du problème : "ça ne marche pas" n'est pas suffisant
La tentative actuelle de résolution que vous avez effectué
Le résultat attendu et le résultat actuel : décrivez ce que vous cherchez à obtenir et son comportement
Toutes pistes de recherches pouvant aider à la résolution

Pas d'aide concernant le code par MP, le forum est là pour ça :)