CODEWITHSUNDEEP
javascriptintersection-observer
qadenza
qadenza

Reputation: 9293

how to use intersection observer to show/hide an element

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>

Upvotes: 0

Views: 1920

Answers (1)

thedude
thedude

Reputation: 9812

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>

Upvotes: 1

Related Questions