jQuery：1以外の不透明度の値は0と同じように振る舞います。

Question

これは私にとって奇妙なものです。むしろイライラします。私はchrome、firefox、およびiOS safariでこれをテストしました。

もしこれが役に立つとすれば、これはcraftcmsプロジェクトですが、私はそれが適切ではないと思います。

ページのscrollTop（）位置に基づいて、要素をフェードアウトさせています。私は不透明度がクロムの開発ツールにすべての要素に適切に設定されていること、そしてそれを上書きする他の不透明性はないことがわかります。

問題は、その不透明度はjQueryを使って0.81に設定されているにもかかわらず、あなたは以下を参照してください青の要素内のテキストが見えないということです

いる物事が働いていない下の画像要素であります。ここで

私の小枝テンプレートの関連セクションです：

<section id="home-about" class="home-section bghidden"> 
    <div class="inner scrollHide"> 
     {{entry.aboutPreview}} 
     <a href="/about" class="button-green"> 
      <span>learn more</span> 
     </a> 
    </div> 
    <img id="collage" class="scrollHide" srcset="{{ craft.imager.srcset(transformedPNG) }}" 
     sizes="(min-width: 1024px) 40vw, 100vw" src="{{collage.url}}" /> 
</section> 
<section id="home-videos" class="home-section"> 
    <div id="home-interviews" data-scroll-speed="3"> 
     <div class="inner scrollHide"> 
      {{entry.interviewsPreview}} 
      <a href="/design" class="button-blue"> 
       <span>see interviews</span> 
      </a> 
     </div> 
    </div> 
</section> 

この関数は、不透明度の値を計算：

function showOnScroll() { 
    var page = $("body").attr('class').split(" ")[0], 
     offsets = { 
      home: [0.5, 0.75], 
      italiaIndex: [0, 0.5], 
      team: [0, 0.5], 
      v: [0.5, 0.75] 
     }; 

    if (offsets[page]) { 
     $entries.each(function(ind, el) { 
      var $entry = ind !== 0 ? $entries.eq(ind - 1) : $entries.eq(0), 
       $scrollStart = ind !== 0 ? parseFloat($entry.attr('data-offset')) + (parseFloat($entry.attr('data-height')) * offsets[page][0]) : 0, 
       $scrollEnd = ind !== 0 ? parseFloat($entry.attr('data-offset')) + (parseFloat($entry.attr('data-height')) * offsets[page][1]) : 0, 
       $opacity; 
      if (scrollPos > $scrollStart && scrollPos < $scrollEnd) { 
       $opacity = ((scrollPos - $scrollStart)/($scrollEnd - $scrollStart)).toFixed(2); 
      } else if (scrollPos <= $scrollStart) { 
       $opacity = 0; 
      } else if (scrollPos >= $scrollEnd) { 
       $opacity = 1; 
      } 
      $entries.eq(ind).find(".scrollHide").css('opacity', $opacity); 
     }); 
    } 
} 

をそして、このリスナーは、上記の関数を呼び出します：

を

window.addEventListener('scroll', function() { 
    this.requestAnimationFrame(function() { 
     scrollPos = window.pageYOffset; 
     /* 
      Irrelevant code removed 
     */ 
     parallax(); 
     showOnScroll(); 
    }); 
}); 

Answer 1

私は質問をCSSを投稿しませんでしたが、HTMLを簡略化した後に、をdiv::after要素に使用して問題が発生していると思います。これは積み重ねの順序に影響を与えたかもしれませんが、私は本当にそのことを確信できません。