Jquery 在滚动时编写更改颜色的代码是更好的方法吗？

我想将rgba颜色中的不透明度从0.1更改为1

我写了这段代码，你们可以在下面看到，但我想问你们是否可以写得更简单。我在这段代码中发现了一个我不知道如何解决的问题。如果我快速向下滚动，有时颜色的不透明度只有0.695，而不是1

如果我只想改变id scrollDiv中背景色的不透明度。我怎么做？例如，如果我将在css中使用scrollDiv背景色rgba（172,16,15,0），我只想从css中更改0

    $(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)"});
            } 
        });
    });

$（文档）.ready（函数（）{
$（窗口）。滚动（函数（）{
var opacity=“0.0”+$（窗口）.scrollTop（）；
如果（$（窗口）.scrollTop（）>=100）{
不透明度=“0”。+$（窗口）.scrollTop（）；
}
if（$（窗口）.scrollTop（）>0&&$（窗口）.scrollTop（）<333）{
css（{“背景色”：“rgba（0,0,0，“+opacity*3+”）”）；
}if（$（窗口）.scrollTop（）==0）{
$（'scrollDiv'）.css（{“背景色”：“rgba（0,0,0,0）”}）；
} 
});
});

代码笔

试试这个

 $(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 + ")"});
}
});

据我所知，你想淡出它，以响应从顶部滚动的百分比

第一行你会给出滚动条的百分比，然后你可以除以100，得到一个平滑的过渡，然后一直应用它。你可以做得更好

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

寻找更好的方法

---

这是一个到的链接，这是这个问题中最棘手的部分。谢谢你，它起作用了。但仍在解决仅改变不透明度的问题。在stackoverflow上我找到了这个代码

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 });
}

我用过

 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 + ")"});
});
});

但我有问题，当滚动100%后，我滚动到70%。它将颜色从RGBA更改为RGB

---

你知道怎么帮我吗？

嗨，你看到我的衣服了吗？你知道怎么解决吗？