Twitter bootstrap 3 如何在引导中更改卷轴上的品牌形象？

我已经设法使图像改变，当我滚动它，但它的定位是完全错误的，走出导航栏。我希望图像在用户向下滚动时改变颜色，但这样将图像放在CSS中会导致错误。有什么好办法吗

CSS:

HTML:

    #fh5co-header.navbar-fixed-top .navbar-brand {
      background: url(../images/loc.png);
      color: #96281B;


            <nav class="navbar navbar-default">
                    <div class="navbar-header">
                        <!-- Mobile Toggle Menu Button -->
                        <a href="#" class="js-fh5co-nav-toggle fh5co-nav-toggle" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"><i></i></a>
                     <a class="navbar-brand" href="index.html"></a> 
                    </div>
                    <div id="navbar" class="navbar-collapse collapse">
                      <ul class="nav navbar-nav navbar-right">
                        <li class="active"><a href="#" data-nav-section="home"><span>Home</span></a></li>
                        <li><a href="#" data-nav-section="work"><span>Menus</span></a></li>
                        <li><a href="#" data-nav-section="testimonials"><span>Testimonials</span></a></li>
                        <li><a href="#" data-nav-section="services"><span>Services</span></a></li>
                        <li><a href="#" data-nav-section="about"><span>About</span></a></li>
                        <li><a href="#" data-nav-section="contact"><span>Contact</span></a></li>
                        <li><a href="#"><i class="icon-facebook"></i></a></li>
                        <li><a href="#"><i class="icon-twitter"></i></a></li>


                      </ul>
                        <ul class="social social-circle">

                            </ul>
                    </div>
                    </nav>

#fh5co-header.navbar-fixed-top.navbar品牌{
背景：url（../images/loc.png）；
颜色：#96281B；

JS

var windowScroll=function（）{
var lastScrollTop=0；
$（窗口）。滚动（功能（事件）{
变量头=$（“#fh5co头”），
scrlTop=$（this.scrollTop（）；
如果（scrlTop>500&&scrlTop尝试这样的事情

创建要在其中切换的类，可以在其中设置背景图像

$(window).scroll(function() {    
    var scroll = $(window).scrollTop();
    if (scroll >= 80) {
        $(".navy").addClass("scrolling");
        $(".navbar-brand").addClass("navscroll");
    } else {
        $(".navy").removeClass("scrolling");
        $(".navbar-brand").removeClass("navscroll");
    }
    });

CSS:


.drop.menuscroll{
边际上限：0px；
过渡：0.8s
}
.menu.lines滚动{
边缘顶部：8px；
过渡：0.8s；
}
.navy.scrolling{
过渡：0.8s；
高度：50px；
边际上限：0px；
}
.navbar品牌img.navscroll{
利润上限：-10px；
宽度：63px；
过渡：0.8s；
}
var windowScroll = function() {
    var lastScrollTop = 0;

    $(window).scroll(function(event){

        var header = $('#fh5co-header'),
            scrlTop = $(this).scrollTop();

        if ( scrlTop > 500 && scrlTop <= 2000 ) {


            header.addClass('navbar-fixed-top fh5co-animated slideInDown');
        } else if ( scrlTop <= 500) {
            if ( header.hasClass('navbar-fixed-top') ) {
                header.addClass('navbar-fixed-top fh5co-animated slideOutUp');
                setTimeout(function(){
                    header.removeClass('navbar-fixed-top fh5co-animated slideInDown slideOutUp');
                }, 100 );
            }
        } 

    });
};

$(window).scroll(function() {    
    var scroll = $(window).scrollTop();
    if (scroll >= 80) {
        $(".navy").addClass("scrolling");
        $(".navbar-brand").addClass("navscroll");
    } else {
        $(".navy").removeClass("scrolling");
        $(".navbar-brand").removeClass("navscroll");
    }
    });