Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sagittis pharetra ante, in malesuada sem fermentum a. In fringilla nibh non nunc ullamcorper convallis. Aenean semper, nulla eget consequat congue, dolor ex faucibus libero, vel accumsan urna erat quis massa. Pellentesque vitae velit nibh. Vivamus non risus est. Maecenas fermentum gravida ullamcorper. Praesent eu iaculis neque. Integer nulla diam, commodo ut lorem vitae, eleifend blandit urna. Suspendisse ullamcorper sodales velit luctus placerat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sagittis pharetra ante, in malesuada sem fermentum a. In fringilla nibh non nunc ullamcorper convallis. Aenean semper, nulla eget consequat congue, dolor ex faucibus libero, vel accumsan urna erat quis massa. Pellentesque vitae velit nibh. Vivamus non risus est. Maecenas fermentum gravida ullamcorper. Praesent eu iaculis neque. Integer nulla diam, commodo ut lorem vitae, eleifend blandit urna. Suspendisse ullamcorper sodales velit luctus placerat.
<section id="header">
<article>
<h1>Menu sticky JavaScript</h1>
</article>
<nav id="main-nav">
<a href="#header">Accueil</a>
<a href="#a">Rubrique 1</a>
<a href="#b">Rubrique 2</a>
<a href="#c">Rubrique 3</a>
</nav>
</section>
<section id="a">
<article>
<h2>Lorem ipsum</h2>
<p>...</p>
</article>
</section>
<section id="b">
<article>
<h2>Lorem ipsum</h2>
<p>...</p>
</article>
</section>
<section id="c">
<article>
<h2>Lorem ipsum</h2>
<p>...</p>
</article>
</section>
*,*::before,*::after{box-sizing: border-box;}
#main-nav {
background-color: #1e1e1e;
padding: 10px;
text-align: center;
width: 100%;
position: relative;
height: 45px;
}
nav a {
color: white;
text-decoration: none;
margin: 0 10px;
}
nav a:hover {
text-decoration: underline;
}
#main-nav.sticky {
position: fixed;
top: 0;
}
.navbarOffsetMargin {
padding-top: 45px;
}
section {
min-height: 100vh;
}
#header {
background: #7b86e8;
color: #270942;
min-height: auto;
}
section:nth-child(odd) {
background-color: #85cbff;
color: #1c2933;
}
article {
width: 90%;
max-width:75ch;
padding: 20px;
margin: 0 auto;
}
@media (prefers-reduced-motion: no-preference) {
html {
scroll-behavior: smooth;
}
}
let RubAccueil = document.getElementById("a");
let navbar = document.getElementById("main-nav");
let navPos = navbar.getBoundingClientRect().top;
window.addEventListener("scroll", e => {
let scrollPos = window.scrollY;
if (scrollPos > navPos) {
navbar.classList.add('sticky');
header.classList.add('navbarOffsetMargin');
} else {
navbar.classList.remove('sticky');
header.classList.remove('navbarOffsetMargin');
}
});