how can I change the background after scroll - html

Question

I have a navbar with background transparent. How can make background black after scrol.
Here is template live
and there is html with navbar
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand"><img src="img/logo.svg" class="brand"></a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li>Despre noi</li>
<li>Servicii</li>
<li>Galerie</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>

Answer 1

Do it with Jquery and add a class
jQuery
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 1) { // Adjust with your needs
$(".navbar").addClass("navbar-black");
} else {
$(".navbar").removeClass("navbar-black");
}
});
CSS
.navbar-black{
background: #000 !important;
}

Answer 2

so you should be able to achieve this with ScrollTop,
Something like:
onscroll = function()
{
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
if (scrollTop > 830)
{
$('.navbar').css('background-color','black');
}
if (scrollTop < 830)
{
$('.navbar').css('background-color','transparent');
}
}
I would perhaps consider using an anchor rather than an absolute height.
If this is what you wanted. :)