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

Answer 2

交換順序，因為> 300為真時，否則將不會發生邏輯邏輯。

還可以通過頻繁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();
  }
});