Jquery 滚动页面时图像淡入

我想做一件简单的事。当我滚动页面时，固定在顶部的图像会出现，在顶部滚动时会消失。我已经在img选择器中设置了可见性隐藏，当页面加载时，它将被隐藏。不幸的是，下面的代码不起作用

这里是JSFIDLE和jquery函数：

已更新

$(window).bind('scroll', function(event) {
  if ($(this).scrollTop() > 100) {
    $('img').fadeTo(1000, 1, function() {
      $(this).css({visibility: 'visible'});
    });
  } else {
    $('img').fadeTo(1000, 0, function() {
      $(this).css({visibility: 'hidden'});
    });
  }
  event.preventDefault();
  });

---

您使用的函数

fadeTo（）

错误

fadeTo（）

的参数为：

fadeTo(duration,opacity,callback)

因此，正确的使用方法如下：

$(window).bind('scroll', function(event) {
  if ($(this).scrollTop() > 100) {
    $('img').fadeTo(500, 1, function() {
      $(this).css({visibility: 'visible'});
    });
  } else {
    $('img').fadeTo(500, 0, function() {
      $(this).css({visibility: 'hidden'});
    });
  }
  event.preventDefault();
  });

此外，在回调中使用不透明度（fadeTo）和可见性可能会带来意外的行为，因为您在fadeIn或fadeOut完全执行后设置了不可见性。也许您可以避免使用可见性，只使用不透明度，如下所示：

    $(window).bind('scroll', function(event) {
      if ($(this).scrollTop() > 100) {
        $('img').fadeTo(500, 1);
      } else {
        $('img').fadeTo(500, 0);
      }
      event.preventDefault();
      });
$('img').hide();//Hide the image at start

我想展示一下。检查它是否符合您的需要。

js

$(window).bind('scroll', function(event) {
  if ($(this).scrollTop() > 100) { 
         $('img').fadeIn(600);
      } else {
         $('img').fadeOut(600);
      }
   event.preventDefault();
  });

还有css

body {
height: 2800px;
}

img {
position: fixed;
width: 300px;
display:none;

}

HTML:

JS

---

在淡出图像之前使其可见

$(window).bind('scroll', function(event) {
    if ($(this).scrollTop() > 100) {
        $('img').css({visibility: 'visible'});
        $('img').fadeTo(500, 0, function() {

    });
    } else {
         $('img').fadeTo(0, 500, function() {
         $(this).css({visibility: 'hidden'});
    });
 }
 event.preventDefault();
});

---

问题是，即使使用你的方式，它也不能很好地工作。当我走到山顶时它不会隐藏我没有这个问题。我做了一些测试，并显示和隐藏没有问题。我对JSFIDLE进行了更新，将持续时间减少到100ms，而不是500ms，以便更好地检查它。你能告诉我什么时候不工作吗？也许我理解错了？不，我不能使用display none，因为我在img的右边有一些内容。它会导致内容的收缩

body {
height: 2800px;
}

img {
 position: fixed;
width: 300px;


}
.hidecontent{
opacity:0;
z-index:-999;
transition:all 0.5s ease;   
}

.showcontent{
opacity:1;
z-index:999;
transition:all 0.5s ease;   
}

$(window).bind('scroll', function(event) {
 if ($(this).scrollTop() > 100) { 
  $('img').removeClass('hidecontent').addClass('showcontent');
 } else {
  $('img').addClass('hidecontent').removeClass('showcontent');
}
event.preventDefault();
});

$(window).bind('scroll', function(event) {
    if ($(this).scrollTop() > 100) {
        $('img').css({visibility: 'visible'});
        $('img').fadeTo(500, 0, function() {

    });
    } else {
         $('img').fadeTo(0, 500, function() {
         $(this).css({visibility: 'hidden'});
    });
 }
 event.preventDefault();
});