javascript - Jquery 在移动设备的某些点上滚动显示和隐藏 div

Question

我想根据用户滚动到的位置显示和隐藏 div:到目前为止我有:

  $(document).scroll(function() {
    var y = $(this).scrollTop();
    if (y > 200) {
      $('.float-container').fadeIn();
    } else if (y > 300) {
      $('.float-container').fadeOut();
    }
  });

按钮在 200 后显示，但需要在 300 时淡出，但事实并非如此。

有什么想法吗？

Answer 1

if 语句永远不会命中 else if，因为如果 y=380，那么它仍然 > 200。尝试交换 if 和 else if 语句:

$(document).scroll(function() {
  var y = $(this).scrollTop();
  if (y > 300) {
    $('.float-container').fadeOut();
  } else if (y > 200) {
    $('.float-container').fadeIn();
  }
});

如果您希望它仅在 200 到 300 之间可见，请执行以下操作:

$(document).scroll(function() {
  var y = $(this).scrollTop();
  if (y >= 200 && y <= 300) {
    $('.float-container').fadeIn();
  } else {
    $('.float-container').fadeOut();
  }
});