スクロールトップの不透明度

Question

トップをスクロールしながら各ブロックをフェードアウトしようとしています。特定の部門がブラウザのトップに達すると、徐々に消えていくはずです。

私は試みましたが、ここでの問題は、すべてのdivが同じクラス名を持つため、すべてのdivをフェードアウトしていることです。私はいくつかの理由でhtml構造を変更したくありません。

この影響を各事業部に適用する方法はありますか？あなたはクラスの各要素のための不透明度を計算する必要が

var header = $('.content'); 
var range = 200; 

$(window).on('scroll', function() { 

    var scrollTop = $(this).scrollTop(); 
    var offset = header.offset().top; 
    var height = header.outerHeight(); 
    offset = offset + height/2; 
    var calc = 1 - (scrollTop - offset + range)/range; 

    header.css({ 'opacity': calc }); 

    if (calc > '1') { 
     header.css({ 'opacity': 1 }); 
    } else if (calc < '0') { 
     header.css({ 'opacity': 0 }); 
    } 

}); 

DEMO

Answer 1

私はあなたのfiddleを更新しました。基本的には、それぞれのdivの計算を.each

Answer 2

。

また、overflow-y：autoで親要素を追加する必要があります。

var parent = $("#parent"); 
 
var childs = $(".content"); 
 
var offset_top = 0; 
 
var range = 200; 
 

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

 
    if(scrollTop<20){ 
 
     childs.css("opacity",1); 
 
    } 
 
    else{ 
 
     childs.each(function(){ 
 
      var top = $(this).offset().top - offset_top; 
 
      var height = $(this).height(); 
 
      var offset = height/4; 
 
\t \t \t 
 
      var opacity = (top+ height - offset)/range; 
 

 
      if(opacity>1) opacity = 1; 
 
      else if(opacity<0) opacity = 0; 
 

 
      $(this).css("opacity",opacity); 
 
\t  }); 
 
    } 
 
});

div {color:#fff; padding:5%} 
 
.content:nth-child(1){background:blue} 
 
.content:nth-child(2){background:grey} 
 
.content:nth-child(3){background:black} 
 
.content:nth-child(4){background:red} 
 

 
body,html{ 
 
    height:100%; 
 

 
} 
 

 
#parent{ 
 
    height:50%; 
 
    overflow-y:auto; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="parent"> 
 

 
<div class="content"> 
 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum animi quos magnam earum nam itaque, sint rerum quibusdam voluptatibus, ipsam accusamus libero accusantium eveniet voluptatem quas, est tenetur eius aliquid. 
 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum animi quos magnam earum nam itaque, sint rerum quibusdam voluptatibus, ipsam accusamus libero accusantium eveniet voluptatem quas, est tenetur eius aliquid. 
 
</div> 
 
<div class="content"> 
 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit perspiciatis temporibus accusantium aspernatur sint, commodi, dolor. Itaque, repudiandae ipsum consequatur, libero quisquam enim. Omnis architecto optio, eaque sapiente quia veritatis? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum animi quos magnam earum nam itaque, sint rerum quibusdam voluptatibus, ipsam accusamus libero accusantium eveniet voluptatem quas, est tenetur eius aliquid. 
 
</div> 
 
<div class="content"> 
 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit perspiciatis temporibus accusantium aspernatur sint, commodi, dolor. Itaque, repudiandae ipsum consequatur, libero quisquam enim. Omnis architecto optio, eaque sapiente quia veritatis? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum animi quos magnam earum nam itaque, sint rerum quibusdam voluptatibus, ipsam accusamus libero accusantium eveniet voluptatem quas, est tenetur eius aliquid. 
 
</div> 
 
<div class="content"> 
 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit perspiciatis temporibus accusantium aspernatur sint, commodi, dolor. Itaque, repudiandae ipsum consequatur, libero quisquam enim. Omnis architecto optio, eaque sapiente quia veritatis? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum animi quos magnam earum nam itaque, sint rerum quibusdam voluptatibus, ipsam accusamus libero accusantium eveniet voluptatem quas, est tenetur eius aliquid. 
 
</div> 
 
<div class="content"> 
 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit perspiciatis temporibus accusantium aspernatur sint, commodi, dolor. Itaque, repudiandae ipsum consequatur, libero quisquam enim. Omnis architecto optio, eaque sapiente quia veritatis? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum animi quos magnam earum nam itaque, sint rerum quibusdam voluptatibus, ipsam accusamus libero accusantium eveniet voluptatem quas, est tenetur eius aliquid. 
 
</div> 
 
<div class="content"> 
 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit perspiciatis temporibus accusantium aspernatur sint, commodi, dolor. Itaque, repudiandae ipsum consequatur, libero quisquam enim. Omnis architecto optio, eaque sapiente quia veritatis? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum animi quos magnam earum nam itaque, sint rerum quibusdam voluptatibus, ipsam accusamus libero accusantium eveniet voluptatem quas, est tenetur eius aliquid. 
 
</div> 
 
<div class="content"> 
 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit perspiciatis temporibus accusantium aspernatur sint, commodi, dolor. Itaque, repudiandae ipsum consequatur, libero quisquam enim. Omnis architecto optio, eaque sapiente quia veritatis? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum animi quos magnam earum nam itaque, sint rerum quibusdam voluptatibus, ipsam accusamus libero accusantium eveniet voluptatem quas, est tenetur eius aliquid. 
 
</div> 
 
</div>

Answer 3

と置き換えて別々に行いました。この別のバージョンの回答fiddleをチェックしてください。

header.each(function(){ 
if($(this).position().top - scrollTop <= 0){  
      $(this).css({ 'opacity': 0 });  
}else{ 
    $(this).css({ 'opacity': 1 }); 
}