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

Posted 2023-05-08

【中文标题】如何在滚动后显示元素并在输入另一个元素时隐藏？

【英文标题】：How can I show an element after scrolling and hide when entering another element?

【发布时间】：2021-04-23 22:49:28

【问题描述】：

我想在滚动后显示一个 DIV，例如向下 800 像素。 为此，我使用great snippet from here：

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

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

我想我可以从上面的答案中更改另一个 sn-p：

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

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

【问题讨论】：

您的第二个 sn-p 只会在页面加载时被调用。这是你的意图吗？

不，如果我输入 .footer 并在离开它之后应该调用它：-/

我会尝试使用交叉点观察器。

【参考方案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>