Javascript function not executed when scrolling fast

Question

I have this piece of javascript that adjust the navigaton bar transparency while scrolling; everything works fine when scrolling slowly but when the scrolling speed is fast it seems it is not called and the navbar transparency is not set.

Any clue? I use 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)); 
    });
});

Intensive CPU website? Is this happening even if this is the only code in a website? — Mosh Feu, Jun 08 '20 at 07:19

score 0 · Accepted Answer · answered Jun 08 '20 at 11:35

0

You are using background-color with a hex code. You can't use hex in combination with opacity. For that to work you need to convert the hex to rgb. And use rgba to use opacity.

Working solution: https://stackoverflow.com/a/19663620/4668696

answered Jun 08 '20 at 11:35

Luuk Skeur

1,900
1
16
31

Javascript function not executed when scrolling fast

1 Answers1