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

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

Answer 1

使用background-color属性而不是不透明度。

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

rgba（红色，绿色，蓝色，alpha）

Answer 2

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

使用rgba。

CSS

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

JS

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

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

2 个答案: