how to make a transparent navbar visible when scrolling

Question

Something like this website

This is what I am trying to achieve:

1. The navbar is transparent on top of the page and
2. On scrolling it goes from transparent to taking specific color.

I have done a lot of research on this but nothing helped. I have tried affix plugin and jQuery but found them to be very confusing. I am new to jQuery and find it a little difficult to understand and implement :(

Answer 1

Here you go:

$(window).scroll(function () {
if ($(window).scrollTop() >= 50) {
$('.navbar').css('background','red');
} else {
$('.navbar').css('background','transparent');
}
});

Working Demo