i have this snippet The problem is that after the home section is no longer visible at all, the navbar should be visible and sticky, but it is not. If I scroll in and return to section 1, the navbar is changed. What should I do to make navbar visible when the home section is no longer visible, and when I return to section 1, the navbar should remain the same?
'use strict';
const home = document.querySelector('.section-1') ;
const sections = document.querySelectorAll('.section') ;
const section2 = document.querySelector('.section-2');
const nav = document.querySelector('nav') ;
const options = {
root:null,
threshold:0
}
const callback = function(entries) {
entries.forEach(entry=>{
console.log(entry.target);
if(!entry.isIntersecting) {
nav.classList.add('stickynav');
console.log('navbar should be visible');
}
else {
console.log('intersect true') ;
}
}) } ;
const sect1Observer = new IntersectionObserver(callback,options) ;
sect1Observer.observe(home);*{
margin:0;
padding:0;
box-sizing:border-box;
}
nav {
height:10vh;
box-shadow:0 3px 3px black ;
display:flex;
justify-content:space-between;
align-items:center;
}
.stickynav{
animation:anime 2s;
position:fixed;
position:absolute;
z-index:10000;
}
@keyframes anime{
0%{
transform:translateX(-100px) ;
}
100%{
transform:translateX(0px) ;
}
}
ul{
display:flex;
justify-content:space-between ;
margin-right:1vw;
width:70%;
}
li{
list-style:none;
}
li a {
text-decoration:none;
font-size:3vw;
}
li a:hover {
border-bottom:3px solid blue ;
transition:0.2s;
}
section{
position:relative;
height:100vh;
display:flex;
justify-content: center;
align-items:center;
top:0.5vh;
}
.section-1{
background:blue;
}
.section-2{
background:green;
}
.section-3{
background:pink;
}<nav>
<div class ="logo">Logo</div>
<ul>
<li><a href ="#">Home</a></li>
<li><a href ="#">About</a></li>
<li><a href ="#">Contact</a></li>
</ul>
</nav>
<section class ="section section-1">
<h2>Home</h2>
</section>
<section class ="section section-2">
<h2>About</h2>
</section>
<section class ="section section-3">
<h2>Contact</h2>