How to turn transparent nav bar to a colored one on Scroll

So, I have noticed this design from different kinds of websites and pages and i was really impressed since I first saw it!

Heres what it does, When the nav bar is inside the banner or the jumbotron or whatever, it has a transparent background giving it a minimalistic approach. however, when the user scrolls over the jumbotron(once the navbar is outside the jumbotron), the navbar sets itself a colored background to reveal its contents properly…

See it live in action and please, tell me how to do it, or what it’s called so that i could do some research and understand how! Thanks!

Visit this link:

I may be mistaken, but I think that jquery’s built-in function $(window).scrolltop() when it isn’t fed any argument, returns the top position of the viewport in pixel. so theorically it should be possible to change the color of an element based on how much the user has scrolled the page down.
Also, using $(/*element*/).offset().top returns the position of the top of the border bow of an element, you could use those two functions to determine wether an element is currently in the viewport and change the color of the navbar if it isn’t. Good luck !

EDIT : Found this :
It looks a bit more complicated than I thought it would be, but nothing too tedious either.

Thanks for that, I’ll check it out in a bit

You can easily achieve that after setting a scrollspy.

there are implementation in every possible frameworks and many CSS libraries has one ready to be used.
Bootstrap scrollspy