使用 javascript 在 700px 后显示 div 后，我该如何隐藏它？

Question

我在wordpress站点有一个div，通过css设置显示：none；在页面加载时。

然后我使用：

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

在 700 像素后淡入。我不知道如何在 2200px 之后再次隐藏它。

我试过：

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

但它在正确的时间显示它，但根本不影响淡出。

有什么想法吗？

Answer 1

问题是第一个 if 语句在 window 滚动超过 700px 后始终评估为真...第二个 else if 语句永远不会执行。所以你需要让它只在 700px 和 2200px 滚动位置之间评估为真。

$(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 语句评估为真，即使您想隐藏它，您也会立即再次显示它。

使用 javascript 在 700px 后显示 div 后，我该如何隐藏它？

after using javascript to show a div after 700px how do i hide it?

javascript

fadeout

fadein

scrolltop