How can I show an element after scrolling and hide when entering another element?

Question

I want to show a DIV after scrolling e.g. 800px down. To do that, I'm using the great snippet from here:

$(document).scroll(function() {
  var y = $(this).scrollTop();
  if (y > 800) {
    $('.bottomMenu').fadeIn();
  } else {
    $('.bottomMenu').fadeOut();
  }
});

That works very well. But now I want to add another step. If I scroll to the .footer of the site, I want to hide the DIV again until I leave the footer.

I thought I could change another snippet from the answer above:

$('.footer').each(function () {
    var y = $(document).scrollTop();
    var t = $(this).parent().offset().top;
    if (y > t) {
        $('.bottomMenu').fadeIn();
    } else {
        $('.bottomMenu').fadeOut();
    }
});

Unfortunately I'm not able to figure it out.

Your second snippet will only be called on page load. Is that what you intended? — isherwood, Jan 19 '21 at 15:50
no, it should called if I enter the `.footer` and after leaving it :-/ — Cray, Jan 19 '21 at 15:50

score 2 · Accepted Answer · answered Jan 19 '21 at 19:47

Using intersection observers, you can trigger a fadeOut when the footer is visible:

let isFooterVisible = false;
$(document).scroll(function() {
  var y = $(this).scrollTop();
  if (y > 800 && isFooterVisible === false) {
    $('.bottomMenu').fadeIn();
  } else {
    $('.bottomMenu').fadeOut();
  }
});
function isIntoView(entries, obs){
  entries.forEach(entry => {
     if (entry.target.id === 'fter'){
       if (entry.isIntersecting === true){
         isFooterVisible = true;
         $('.bottomMenu').fadeOut();
       }
       else{
         isFooterVisible = false;
       }
     } 
  });
}
let options = {
  root: null,
  rootMargin: '0px',
  threshold: 0
};
let observer = new IntersectionObserver(isIntoView, options);
let target = $('#fter')[0];
observer.observe(target);

body{
  height: 1700px;
  width: 100%;
  position: absolute;
}
.bottomMenu{
  position: fixed;
  top: 100px;
  display: none;
  background-color: #f07;
}
#fter{
  position: absolute;
  width: 100%;
  height: 100px;
  background-color: #0f7;
  bottom: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="bottomMenu">
  Here is the menu
</div>
<footer id="fter">
  Here is the footer
</footer>

How can I show an element after scrolling and hide when entering another element?

1 Answers1