CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user3932810
user3932810

Reputation:

div opacity on scroll top

I am trying to fade out the each blocks while scrolling top. When the particular div reached browser top it should slowly fade away.

I have tried but the problem here is that it is fading out all the divs since all divs have the same class name. I do not want to change the html structure for some reasons.

Is there any way to apply this effect on each divs?

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

Upvotes: 0

Views: 105

Answers (3)

polamoros
polamoros

Reputation: 259

You have to calculate the opacity for each element of the class.

Also you have to add a parent element with 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;
			
            var opacity = (top+ height - offset) / range;

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

            $(this).css("opacity",opacity);
	    });
    }
});
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>

Upvotes: -1

Afsar
Afsar

Reputation: 3124

Check out this different version of answer fiddle.

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

Upvotes: 0

Dygestor
Dygestor

Reputation: 1259

I updated your fiddle. Basically, I did the calculation for each div separately by wrapping your code with .each

Upvotes: 2

Related Questions