当窗口滚动到顶部时，如何隐藏 div？

Question

当我的页面向下滚动时，我有一个向上箭头淡入。 我怎样才能让它在用户滚动回页面顶部时淡出？

这是我到目前为止。 箭头将消失一秒钟，然后淡出我不想要的 - 它应该保持隐藏状态。

 function footerFadeIn() { $(window).scroll(function() { $('footer').fadeIn('slow'); }); } function footerFadeOut() { $('footer').fadeOut('slow'); $('footer').hide(); } $(window).scroll(function() { if ($(window).scrollTop() == 0) { footerFadeOut(); } else if ($(window).scrollTop() > 0) { footerFadeIn(); } });

 footer { position: fixed; bottom: 0; right: 0; padding: 20px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <footer> <i class="fas fa-chevron-up" style="font-size: 35px;"></i> </footer>

我在这里的思考过程是有两个函数 - footerFadeIn()和footerFadeOut() 。 然后我有一个 if 语句，用于检查窗口是否从 scrollTop() 为零并执行相应的函数。

编辑：我的问题与建议的问题不同，因为我只有两个导致问题的事件处理程序。

Answer 1

问题是因为您在footerFadeIn()添加了滚动事件处理程序。 因此，当滚动事件发生时，您最终会创建另一个新的滚动事件处理程序。 要解决此问题，只需删除该函数中的滚动处理程序并保留在 DOM 加载时调用的主要处理程序。

另请注意，您需要在fadeOut()的回调中调用hide() fadeOut() 。 这就是淡出动画没有正确发生的原因。 尝试这个：

 function footerFadeIn() { $('footer').fadeIn('slow'); } function footerFadeOut() { $('footer').fadeOut('slow', function() { $(this).hide(); }); } $(window).scroll(function() { if ($(window).scrollTop() == 0) { footerFadeOut(); } else if ($(window).scrollTop() > 0) { footerFadeIn(); } });

 html, body { height: 2000px; } footer { position: fixed; bottom: 0; right: 0; padding: 20px; display: none; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css" /> <footer> <i class="fas fa-chevron-up" style="font-size: 35px;"></i> </footer>