Is it better way to write code for change color when scrolling?

Question

I want to change opacity in rgba color from 0.1 to 1.

I writen this code which you can see bellow, but I want to ask you if it can be written easier. And I found 1 problem in this code which I don't know solve. If I very fast scroll down, sometime happend opacity of color is only 0.695 and not 1.

And if I want to change only opacity of background color from id scrollDiv. How can I do it? For example if I will have in css for scrollDiv background color rgba(172,16,15,0) and I want to change only 0 from css.

    $(document).ready(function() {
       $(window).scroll(function() {
        var opacity = "0.0" + $(window).scrollTop();
            if ($(window).scrollTop() >= 100) {
            opacity = "0." + $(window).scrollTop();
            }
            if ($(window).scrollTop() > 0 && $(window).scrollTop() < 333) {
            $('#scrollDiv').css({"background-color": "rgba(0,0,0,"+ opacity*3 + ")"});
            } if ($(window).scrollTop() === 0) {
            $('#scrollDiv').css({"background-color": "rgba(0,0,0,0)"});
            } 
        });
    });

Codepen https://codepen.io/soorta/pen/QWLBOgW

score 0 · Answer 1 · answered Sep 15 '19 at 19:34

Try out this one

 $(document).ready(function() {
       $(window).scroll(function() {
  var s = $(window).scrollTop(),
      d = $(document).height(),
      c = $(window).height();

  var scrollPercent = (s / (d - c)) * 100;
  var opacity = scrollPercent/100;
  $('#scrollDiv').css({"background-color": "rgba(0,0,0,"+ opacity + ")"});
}
});

From what i understand you want to fade it in response to the percentage of the scroll from the top.

The first lines will you give the percentage of the scrollTop, then you can divide by 100, to get a smooth transition and just apply it all the time.Even better you could

setTimeout(function(){    
  $('#scrollDiv').css({"background-color": "rgba(0,0,0,"+ opacity + ")"});
},0);

for an even better approach

This is a link to the original percentage calculation that is the most tricky part of this question in general

Hi did you see my answear ? Do you know to solve it ? – Tomas Sep 18 '19 at 18:00 — Tomas, Sep 18 '19 at 18:00

score 0 · Answer 2 · answered Sep 16 '19 at 09:56

Thank You it works. But is still solving changing only opacity. On the stackoverflow I found this code.

function addAlphaChannel() {
    var oldBGColor = $('div').css('background-color'), //rgb(100,100,100),
        newBGColor = oldBGColor.replace(/[^,]+(?=\))/, '0.8'); //rgba(100,100,100,.8);

    $('div').css({ backgroundColor: newBGColor });
}

I used it

 jQuery(document).ready(function() {
       jQuery(window).scroll(function() {
  var s = jQuery(window).scrollTop(),
      d = $(document).height(),
      c = jQuery(window).height();
  var scrollPercent = (s / (d-c)) * 100;
  var opacity = scrollPercent/100;
  var oldColor = jQuery('#scrollDiv').css( "background-color" );
  var newColor = oldColor.replace(/[^,]+(?=\))/, opacity); //rgba(100,100,100,.8);
  console.log(newColor);      
  $('#scrollDiv').css({ backgroundColor: newColor });       
  //jQuery('#scrollDiv').css({"background-color": "rgba(0,0,0,"+ opacity + ")"});
});
});

But I have problem when scroll 100 % and after it I scroll to 70%. It change color from RGBA to RGB.

Do you know to help ?

Is it better way to write code for change color when scrolling?

2 Answers2