如何在滾動后顯示元素並在輸入另一個元素時隱藏？

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>