javascript - 当窗口滚动到顶部时，如何隐藏一个 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()。这就是为什么淡出动画没有正确发生的原因。试试这个:

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>