javascript - 当视口(viewport)改变时代码会出错

Question

我有以下函数，当用户从底部滚动 250px 时(而不是在移动设备上)，“up-btn”会出现在页面底部

html(在 head 标签中)

<script>
 if ($(window).width() > 768) {
$(window).scroll(function () {
    if ($(window).scrollTop() + $(window).height() > ($(document).height() - 250)) {
        $("#up-btn").fadeIn(500);
    } else {
        $("#up-btn").fadeOut(500);
    }
   });
 };
</script>

html(正文)

<a id="up-btn" href="javascript:void(0);" onclick="scrolltop();"><i class="fa fa-chevron-up fa-lg"></i></a>

它工作正常。但是，当我将窗口缩放到移动设备然后缩放到ceen大小时。或者，如果窗口以移动设备尺寸打开，等等，代码将不起作用并且按钮保持不可见。

想知道是否对我的代码进行了更改，使其更加万无一失？

Answer 1

只需删除 if 语句即可:

<script>
  $(window).on('scroll', function() {
    if ($(window).scrollTop() + $(window).height() > ($(document).height() - 250)) {
      $("#up-btn").fadeIn(500);
    }
    else {
        $("#up-btn").fadeOut(500);
    }
  });
</script>

说到这里，您可能会考虑对函数进行去抖动，以避免一直重新计算，例如。当滚动停止时重新计算。