使用jquery

Question

我想在每次滚动像素数量时显示一个div，并在更多滚动后逐渐淡出。我发现了一些逻辑但是，最后有一个冲突，div再次消失，因为我每次滚动时都会告诉＆gt; 250它会淡入。 我该如何解决？

$('#1').hide();

$(window).scroll(function() {
  if ($(this).scrollTop() > 250) { //use `this`, not `document`
    $('#1').fadeIn();
  }
  if ($(this).scrollTop() > 1250) { //use `this`, not `document`
    $('#1').fadeOut();
  }
});  

Answer 1

仅当scrollTop值小于或等于1250时显示元素。

if ($(this).scrollTop() > 250 && $(this).scrollTop() <= 1250){
   $('#1').fadeIn();
} 

虽然您可以使用 stop() 来停止上一个动画。

$(window).scroll(function() {
  if ($(this).scrollTop() > 250) {
    if ($(this).scrollTop() > 1250) 
       $('#1').stop().fadeOut();
    else
       $('#1').stop().fadeIn();
  }
});  

Answer 2

问题是因为你的逻辑是有缺陷的。您需要满足scrollTop不在当前if条件范围内的情况。试试这个：

$(window).scroll(function() {
  if ($(this).scrollTop() > 250 && $(this).scrollTop() < 1250) {
    $('#1').fadeIn();
  } else {
    $('#1').fadeOut();
  }
}); 

Working example

请注意，在上面的示例中，我必须更改id，以便它不会以Chrome中存在问题的数字开头。