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

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