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

【问题标题】：Javascript on scroll to change nav bar opacity is making my nav content dissapear滚动更改导航栏不透明度的 Javascript 使我的导航内容消失
【发布时间】：2014-07-08 23:55:35
【问题描述】：

我到处寻找，但找不到适用于这个问题的答案。

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

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

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

【问题讨论】：

标签： javascript html css opacity navbar

【解决方案1】：

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

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

rgba（红、绿、蓝、阿尔法）

【讨论】：

【解决方案2】：

这是因为父容器在使用不透明度时会影响任何子容器。

使用rgba。

CSS

#navbar-container {
    background-color: rgba(255, 255, 255, 1);
}

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

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

【讨论】：