当窗口滚动到顶部时如何隐藏 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 加载时调用的主要处理程序。

另外请注意，你需要调用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>