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

确定。因此，如果我正确理解了您想要的内容，当您的图像已经以这种方式消失时，您可以阻止淡入淡出效果：

＆＃13;

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

＆＃13;

.wrapper {
  background: orange;
  height: 2000px;
}

.wrapper img {
  width: 300px;
  position: absolute;
  opacity: 0;
}

＆＃13;

<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>

＆＃13;

Answer 2

尝试更改内嵌样式为style="opacity: 0.1;的部分。通常内联样式会覆盖style标记中可能包含的CSS。看看这个例子我将内联样式设置为蓝色，但是将它设置为css以红色蓝色获胜。也许这就是导致你的不透明度保持不变的原因。

#element{
  color:red;
}

<div id="element" style = "color:blue;">element</div>

这就是为什么最好为你的样式添加和删除类

的原因之一

我看到你用其他内联样式覆盖内联样式，所以上面的内容可能不会引起你的问题。这是你的代码片段工作。我不知道你想要什么。它消失了

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

.top{
  height: 100vh;
  background: rgba(120, 30, 200, 0.3);
}
.fadeInScroll{
  width: 300px;
  height: 500px;
  background: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="top"></div>
<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>
  <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>
  <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>
  <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>

向下滚动时淡入图像

2 个答案: