need to show nava if wrapt is not visible by scrolling the page
and vice versa - hide the nava if wrapt is visible
what is wrong with this JS code ?
let io = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if(entry.isIntersecting){modify(entry.target);}
else{revert(entry.target);}
});
});
function modify(el){
if(el.id == "wrapt"){$(nava).slideUp();}
}
function revert(el){
if(el.id == "wrapt"){$(nava).slideDown();}
}
$(document).ready(function(){
io.observe(document.querySelector('#wrapt'));
});.nava{
display:none
height:25px;
background:orange;
position:relative;
z-index:9;
}
.wrapt{
height:54px;
background:lightblue;
}
.story{
height:200vh;
background:#ddd;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='nava' id='nava'></div>
<div class='wrapt' id='wrapt'></div>
<div class='story'></div>Nothing wrong with the JS part, only the CSS.
I've modified the nava class so it will be visible when the page is scrolled down:
.nava {
display: none;
height:25px;
background: orange;
position: fixed;
width: 100%;
z-index: 9;
top: 0;
left: 0;
}
let io = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
modify(entry.target);
} else {
revert(entry.target);
}
});
});
function modify(el) {
if (el.id == "wrapt") {
$(nava).slideUp();
}
}
function revert(el) {
if (el.id == "wrapt") {
$(nava).slideDown();
}
}
$(document).ready(function() {
io.observe(document.querySelector('#wrapt'));
});.nava {
display: none;
height:25px;
background: orange;
position: fixed;
width: 100%;
z-index: 9;
top: 0;
left: 0;
}
.wrapt {
height: 54px;
background: lightblue;
}
.story {
height: 200vh;
background: #ddd;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='nava' id='nava'></div>
<div class='wrapt' id='wrapt'></div>
<div class='story'></div>