时间戳

首页 > 解决方案 > 滚动时编写更改颜色的代码是否更好？

jquery - 滚动时编写更改颜色的代码是否更好？

问题描述

我想将 rgba 颜色的不透明度从 0.1 更改为 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

标签： jquery

解决方案

谢谢它有效。但仍在解决仅改变不透明度的问题。在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。

你知道帮忙吗？

推荐阅读