CODEWITHSUNDEEP
javascriptjqueryoffset
user4075462
user4075462

Reputation: 115

change divs opacity in different areas onscroll

I want to achieve something like in the graphic below: enter image description here

I just can't make this work with this code. https://jsfiddle.net/3vy66a7o/

$(window).on('scroll', function() {
  $('.object').each(function() {
   var offset = $(this).offset().top;
   var height = $(this).outerHeight();
   offset = offset + height / 2;

   if (offset < 100) {
     $(this).fadeTo("fast", 0);
   } else if ((offset > 200) && (offset < 300)) {
     $(this).css("opacity": "1");
   } else if (offset > 300) {
     $(this).fadeTo('fast', 1);
   }
 else {
   $(this).css("opacity": "0");
 }
 });
});

Upvotes: 0

Views: 34

Answers (1)

kmukku
kmukku

Reputation: 96

Detect the element position on window and act accordingly. 

var offset = $(this).offset().top - $(window).scrollTop();

See https://jsfiddle.net/3vy66a7o/3/

Was this the effect you were looking for?

Upvotes: 1

Related Questions