javascript - 向下滚动时淡入图像

Question

我正在制作一个一页网站，在网站中间我有一些图像，我想在用户向下滚动时显示这些图像。当用户向下滚动时，我希望图像淡入并保持 100% 不透明度。我已经浏览了很多不同的脚本，但没有一个起作用。我发现一段很好的代码被剪掉了，但它似乎仍然不起作用。它只显示图像，但不透明度较低。这是代码:

<script>
  var $win = $(window);
  var $img = $('.fadeInScroll'); // Change this to affect your desired element.
  $win.on('scroll', function() {
    var scrollTop = $win.scrollTop();
    $img.each(function() {
      var $self = $(this);
      var prev = $self.offset();
      if (prev) {
        var pt = 0;
        pt = prev.top - $win.height();
        $self.css({
          opacity: (scrollTop - pt) / ($self.offset().top - pt)
        });
      } else {
        $self.css({
          opacity: 1
        });
      }
    });
  }).scroll();
</script>
<section id="about">
  <h2><center>Header</center></h2>
  <div class="fadeInScroll" display:="" opacity:="0" style="opacity: 0.1;"> <img src="/ap/wsf1.png" alt="trulycode-responsive" class="aligncenter size-medium wp-image-555"></div>
</section>

Answer 1

好的。因此，如果我正确理解你想要什么，当你的图像已经以这种方式淡入淡出时，你可以阻止你的淡入淡出效果:

var $win = $(window);

$win.on('scroll', function () {
    var scrollTop = $win.scrollTop();

    $('img.hidden').each(function () {
        var $self = $(this);
        var prev=$self.offset();
        if(prev){
            var pt=prev.top-$win.height();  
            var opacity = (scrollTop-pt) / ($self.offset().top-pt);
            $self.css({
                opacity: opacity
            });
            if(opacity >= 1) $self.removeClass('hidden');
        }
        else{
            $self.css({
                opacity: 1
            });
        }  
    });

}).scroll();

.wrapper {
  background: orange;
  height: 2000px;
}

.wrapper img {
  width: 300px;
  position: absolute;
  opacity: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="wrapper">
  <img class="hidden" style="top: 400px;" src="http://sport-nc.com/wp-content/uploads/2015/06/India_Surf_Tours_-_17__1_.jpg"/>
  <img class="hidden" style="top: 1000px;" src="http://sport-nc.com/wp-content/uploads/2015/06/India_Surf_Tours_-_17__1_.jpg"/>
  <img class="hidden" style="top: 1600px;" src="http://sport-nc.com/wp-content/uploads/2015/06/India_Surf_Tours_-_17__1_.jpg">
</div>