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

Question

I have a div in a wordpress site, which is set via css to display: none; on page load.

I then use:

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

to fade it in after 700px. I cannot work out how to hide it again after 2200px.

I have tried:

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

but it shows it at the right time but doesnt effect the fade out at all.

Any ideas?

Answer 1

The problem is the first if statement is always evaluating to true after the window has been scrolled beyond 700px ... The second else if statement is never executed. So you need to make it so it only evaluates to true between the 700px and 2200px scroll-positions.

$(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

Just add && $(window).scrollTop() < 2200 to get:

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

Your first if statement evaluates as true, even if you want to hide it, you immediatly show it again.