快速滚动时未执行 Javascript 函数答案

【问题标题】：Javascript function not executed when scrolling fast快速滚动时未执行 Javascript 函数
【发布时间】：2020-09-27 02:01:29
【问题描述】：

我有这段 javascript 可以在滚动时调整导航栏的透明度；缓慢滚动时一切正常，但是当滚动速度很快时，它似乎没有被调用并且导航栏透明度没有设置。

有什么线索吗？我使用 Bootstrap 4。

$(document).ready(function() {
    // Set original transparency
    $("#navbar").css("background-color", "#1c447a00"); 

    // Bind to scroll
    $(window).scroll(function(){
        // Fade navbar
        var opacity = $(this).scrollTop() * 3;
        if(opacity <= 0.2) {
            opacity = 0;
        } else if(opacity > 255) {
            opacity = 255;
        }
        $("#navbar").css("background-color", "#1c447a" + opacity.toString(16)); 
    });
});

【问题讨论】：

密集型 CPU 网站？即使这是网站中唯一的代码，也会发生这种情况吗？

标签： javascript jquery bootstrap-4

【解决方案1】：

您正在使用带有十六进制代码的background-color。您不能将十六进制与不透明度结合使用。为此，您需要将十六进制转换为 rgb。并使用rgba 来使用不透明度。

工作解决方案：https://stackoverflow.com/a/19663620/4668696

【讨论】：