Change the logo image when from the CSS class navbar-inverse

Inside my HTML on page I have a header div that changes in css when scrolling the page up to a certain pixel. I can change the colors of the bar and the texts but I can not change the image of the logo

How do I change the image as the navbar changes to navbar-inverse?

What is the javascript for this?

    <div id="header">
        <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <!-- Start Logo / Text -->
                    <img src="img/logo-cecom.png" height="50px" align="left" alt="logo da central dos Compradores"></img>

                    <!-- End Logo / Text -->
                </div>
                <!-- Start Navigation -->
                <div class="navigation navbar-collapse collapse">
                    <ul class="nav navbar-nav menu-right">
                        <li class="active"><a href="#banner">Início</a></li>
                        <li><a href="#intro">Benefícios</a></li>
                        <li><a href="#testimonials">Depoimentos</a></li>
                        <li><a href="#faq">Dúvidas</a></li>
                    </ul>
                </div>

Understand .. I'm a beginner and I do not know how to create javascrip. The css is this:

.menu-right {float: right;}
.navbar-inverse { margin-bottom: 0; -webkit-border-radius: 0; -moz-border-radius: 0;border-radius: 0; -webkit-transition: background .5s ease-in-out,padding .5s ease-in-out; -moz-transition: background .5s ease-in-out,padding .5s ease-in-out; transition: background .5s ease-in-out,padding .5s ease-in-out; border: none; background-color: rgba(0,0,0,0.4); padding: 15px 0; }
.navbar-inverse .navbar-nav > li > a { color: #fff; display: block; -webkit-transition: all 100ms ease-in-out; -moz-transition: all 100ms ease-in-out; -o-transition: all 100ms ease-in-out; -ms-transition: all 100ms ease-in-out; transition: all 100ms ease-in-out; }

.navbar-inverse .navbar-nav > li > a, .navbar-inverse .navbar-nav > li {-webkit-transition: all 400ms linear; -moz-transition: all 400ms linear; -o-transition: all 400ms linear; -ms-transition: all 400ms linear; transition: all 400ms linear;}

.navbar-toggle { padding: 4px 6px; font-size: 16px; color: #fff;}
.navbar-toggle:focus,
.navbar-toggle:active { outline: 0;}

.navbar-inverse .navbar-toggle { background: #08b4da; border: none;}
.navbar-nav {margin: 0;}
.scroll-fixed-navbar {padding-bottom:0;}

.navbar-inverse .navbar-nav > .active > a, .navbar-inverse .navbar-nav > .active > a:hover, .navbar-inverse .navbar-nav > .active > a:focus {background-color: transparent;}
.navbar > .container .navbar-brand {margin-left: 0;}
.navbar-brand { height:auto;}

.scroll-fixed-navbar { padding: 10px 0; background-color: #FFF; -webkit-box-shadow: 0 0 7px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 0 7px rgba(0, 0, 0, 0.1); box-shadow: 0 0 7px rgba(0, 0, 0, 0.1);}
.scroll-fixed-navbar .navbar-nav > li > a {color: #333;}
.scroll-fixed-navbar .navbar-nav > li > a:hover, 
.scroll-fixed-navbar .navbar-nav > li.active > a,
.scroll-fixed-navbar .navbar-nav > li.active > a:hover {color: #00a8d6; }

.navbar-toggle { position: relative; float: right; background-color: transparent; padding: 10px; margin: 13px 30px 13px 0; border: none; color: #fff; border: 2px solid #fff;}
.navbar-toggle .icon-bar { background-color: #fff;}

.navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form {border-color: rgba(0,0,0,0.1);}

.navbar-inverse .navbar-brand  {color: #FFF; font-size: 30px; font-weight: 700; padding: 0;}
.scroll-fixed-navbar.navbar-inverse .navbar-brand  {color: #1a1a1a; font-size: 30px; font-weight: 700; padding: 0;}
.text-logo {margin-top: 5px}
.text-logo i {margin-right: 10px;}

@media only screen and (max-width: 767px) {
    .navbar-inverse {background-color: #FFF; padding:0;}
    .navbar > .container .navbar-brand {margin-left: 15px; color: #1a1a1a; margin-top: 15px;}
    .menu-right {float: none;}
    .navbar-inverse .navbar-nav > li > a {color: #1a1a1a;}
    .navbar-inverse .navbar-nav > .active > a, 
    .navbar-inverse .navbar-nav > .active > a:hover, 
    .navbar-inverse .navbar-nav > .active > a:focus,
    .navbar-inverse .navbar-nav > li > a:hover { color: #00A8D6;}
    img {display: block; margin: 20px auto;}
    .section {padding: 70px 0;}
    .main-point {margin-bottom: 40px;}
    .video-container {margin-bottom: 40px;}
    .img-thumbnail {margin: 0;}
}