Question

我想将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)"});
            } 
        });
    });

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

Answer 1

尝试这个

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

据我了解，您想根据顶部滚动的百分比淡入淡出。

第一行将为您提供scrollTop的百分比，然后可以除以100，以获得平滑的过渡效果并始终应用它。更好的方法是

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

一种更好的方法

这是指向original percentage calculation的链接，这是该问题最棘手的部分

Answer 2

谢谢你的工作。但是仍在解决仅改变不透明度的问题。在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。

您知道要帮助吗？

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

2 个答案: