How to properly handle Navbar color change on Scroll in Angular?

Question

I\'m making a project in angular. I would like to add a navbar which have transparent background initially but on scroll it will change its color. I am using bootstrap class

Answer 1

Defining a scroll event is as easy as defining an onscroll attribute, like

Let's implement myScroll. Scroll is a continous event and the tricky part is to catch its end. For this purpose we can do setInterval:

var scrollInterval = undefined;
var lastScroll = false;
function myScroll() {
    lastScroll = true;
    if (!scrollInterval) {
        //scroll has started, do some coloring
        lastScroll = false;
        scrollInterval = setTimeout(function() {
            if (!lastScroll) {
                //scroll has ended, revert the coloring
                scrollInterval = clearInterval(scrollInterval);
            }
            lastScroll = false;
        }, 100);
    } else {
        lastScroll = true;
    }
}