如何在滚动后显示元素并在输入另一个元素时隐藏？

Question

我想在滚动后显示一个DIV，例如向下滚动800px。 为此，我使用了这里的精彩片段：

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

这很好用。 但现在我想添加另一个步骤。 如果我滚动到网站的.footer ，我想再次隐藏 DIV，直到我离开页脚。

我想我可以从上面的答案中更改另一个片段：

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

不幸的是，我无法弄清楚。

Answer 1

使用交叉点观察者，您可以在页脚可见时触发fadeOut ：

 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>