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();
  }
});

Answer 2

交换顺序，因为当> 300为true时，否则将不会发生逻辑。

还通过频繁的scroll事件来缓存选择器，以提高性能。

var $floatContainers = $('.float-container');
var $document = $(document).on('scroll', function() {
  var y = $document.scrollTop();

  if (y > 300) {
    $floatContainers.fadeOut();
  }
  else if (y > 200) {
    $floatContainers.fadeIn();
  }
});

另一种选择是嵌套第二个条件。

var $floatContainers = $('.float-container');
var $document = $(document).on('scroll', function() {
  var y = $document.scrollTop();

  if (y > 200) {
    if (y > 300) {
      $floatContainers.fadeOut();
    } else {
      $floatContainers.fadeIn();
    }
  }
});

如果只希望在201-300滚动范围内淡入淡出...

var $floatContainers = $('.float-container');
var $document = $(document).on('scroll', function() {
  var y = $document.scrollTop();

  if (y > 200 && y <= 300) {
    $floatContainers.fadeIn();
  } else {
    $floatContainers.fadeOut();
  }
});

jQuery在移动设备的某些位置滚动显示和隐藏div

2 个答案: