div Opazität auf Scroll-Top

Question

Ich versuche, die einzelnen Blöcke beim Scrollen oben auszublenden. Wenn der jeweilige Div den Browser erreicht, sollte er langsam verschwinden.

Ich habe versucht, aber das Problem hier ist, dass es alle divs ausblendet, da alle divs den gleichen Klassennamen haben. Ich möchte die HTML-Struktur aus einigen Gründen nicht ändern.

Gibt es eine Möglichkeit, diesen Effekt auf jedes divs anzuwenden?

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

ich Ihre fiddle aktualisiert. Grundsätzlich habe ich die Berechnung für jede div getrennt, indem Sie Ihren Code mit .each

Answer 2

Sie haben die Opazität für jedes Element der Klasse zu berechnen.

Auch müssen Sie ein übergeordnetes Element mit Überlauf hinzufügen-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

umhüllen. Überprüfen Sie diese unterschiedliche Version der Antwort fiddle.

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