滚动更改导航栏不透明度的 Javascript 使我的导航内容消失

Question

我找遍了所有地方，但找不到适用于此问题的答案。

我有一个粘性导航栏，它在滚动时变得不透明，使用以下代码:

    var target = $('#navbar-container');
var targetHeight = target.outerHeight();

$(document).scroll(function(e){
    var scrollPercent = (targetHeight - window.scrollY) / targetHeight;
    if(scrollPercent >= 0){
        target.css('opacity', 1);
    }
    else  target.css('opacity', 0.50);
});

但此代码使背景和导航栏内的所有内容变得不透明，我希望文本链接和 Logo 保持可见。我读过有关使用 RGB 背景仅使背景不透明的信息，但我不确定如何在此代码的参数内执行此操作。我确定有一个简单的解决方案，但我找不到!

Answer 1

使用背景颜色属性代替不透明度。

target.css('background-color', 'rgba(0, 0, 0, 0.5)');

rgba(红、绿、蓝、阿尔法)