滾動更改Java滾動條不透明度的Javascript使我的Nav內容消失

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