使用javascript在700px之后顯示div后，如何隱藏它？

Question

我在wordpress網站中有一個div，該站點通過CSS設置為顯示：無； 頁面加載。

然后，我使用：

$(window).scroll(function(){
  if($(window).scrollTop()>700){
     $("#logo-scroll").fadeIn();
  }
});

在700px后淡入 2200px之后，我無法解決如何再次隱藏它。

我努力了：

$(window).scroll(function(){
  if($(window).scrollTop()>700){
     $("#logo-scroll").fadeIn();
  }
  else if($(window).scrollTop()>2200){
     $("#logo-scroll").fadeOut();
  }
});

但它會在正確的時間顯示它，但完全不會影響淡出效果。

有任何想法嗎？

Answer 1

問題是，在窗口滾動到700px以上之后，第一個if語句始終評估為true ...第二個else if語句永遠不會執行。 因此，您需要進行設置，使其僅在700px和2200px滾動位置之間計算為true。

$(window).scroll(function(){
  var scroll_position = $(window).scrollTop();

  if(scroll_position > 700 && scroll_position <= 2200){
    $("#logo-scroll").fadeIn();
  }
  else if(scroll_position > 2200){
    $("#logo-scroll").fadeOut();
  }
});

Answer 2

只需添加&& $(window).scrollTop() < 2200即可：

$(window).scroll(function(){
  if($(window).scrollTop() > 700 && $(window).scrollTop() < 2200){
     $("#logo-scroll").fadeIn();
  }
  else if($(window).scrollTop()>2200){
     $("#logo-scroll").fadeOut();
  }
});

您的第一個if語句的評估結果為true，即使您要隱藏它，也要立即將其再次顯示。