Question

I’m using the following to change an element’s opacity from 0 to 1 based upon the number of pixels they have scrolled and it works perfectly.

$(window).scroll(function() {
  if ($(this).scrollTop() > 200) {
      $("#hook").stop().animate({
          opacity: 1
      }, 300);
  } else {
      $("#hook").stop().animate({
          opacity: 0
      }, 300);
  }
});

What I would like to add is something that says, “when the user has scrolled 500 pixels or more, fade it back out.”

Answer 1

Am I missing something? That code is 99% there! http://jsfiddle.net/AwnWe/2

$(window).scroll(function() {
  var scrollTop = $(this).scrollTop();
  console.log('Scroll ', scrollTop);
  if (scrollTop > 500 || scrollTop < 200) {
      $("#hook").stop().animate({
          opacity: 0
      }, 300);
  } else {
      $("#hook").stop().animate({
          opacity: 1
      }, 300);
  }
});​