滚动后如何更改背景

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><a href="#about">Despre noi</a></li>
                <li><a href="#services">Servicii</a></li>
                <li><a href="#portfolio">Galerie</a></li>
                <li><a href="#contact">Contact</a></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. :)