CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user6728620
user6728620

Reputation:

Increase div opacity on scroll down

I have researched lost of sources, but there are no solution for my problem. I created a div and its visibility is hidden in CSS sources. I want to get to start it from 0.1 of opacity when scroll on 200 and when scroll located on 300 opacity becomes 1.

$(document).ready(function(){                    
    $(window).scroll(function(){
        if ($(this).scrollTop() > 150) {
            $('.fscrollonh').css({"opacity": "0.1",  "visibility": "visible"});
            $('.fscrollonh').show(500);
        } else {
            $('.fscrollonh').hide(500);
        }
    });
});

Upvotes: 3

Views: 1493

Answers (2)

Mayank
Mayank

Reputation: 727

Try this. It calculates opacity based on a function and calculation of scroll

$(document).ready(function(){                    
    $(window).scroll(function(){
      var scrollval =   $(this).scrollTop();
      if ( scrollval > 150) {
            $('.fscrollonh').css({"visibility": "visible"});
            $('.fscrollonh').show(500);
            $('.fscrollonh').css({
                opacity: function() {
                 var opacity = (150 * .006) + 0.1;
                 return opacity;
                 }
              });
        }
    else {
            $('.fscrollonh').hide(500);
        }
    });
});

Though I have not tried it, yet.

Hopt this helps.

Upvotes: 0

tao
tao

Reputation: 90138

I assume you're looking for something like this?

$(document).ready(function(){                    
    $(window).scroll(function(){
      let sT =  $(window).scrollTop();
      $('.scrollonh').css({
        opacity: (sT < 201 ? 0 : (sT > 300 ? 1 : (sT - 200)/100))
      })
    });
});
body {
  min-height: 200vh;
}
.scrollonh {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  opacity: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.\32 00pxmark, 
.\33 00pxmark {
  margin-top: 200px;
  height: 0;
  overflow: visible;
  border-top: 1px solid red;
}
.\33 00pxmark {
  margin-top: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="scrollonh">I fade on scroll</div>
<div class="200pxmark">200px mark</div>
<div class="300pxmark">300px mark</div>

Upvotes: 2

Related Questions