All right? First of all I want to thank the help. Well, my question is as follows:

I would like to to scroll the mouse and create a background and decrease the space from the top, also change the logo. The question of the top bottom and then I could do as code below. However, I do not know what to do to change the logo.

HTML:

<div class="col-md-12">
        <div class="navbar-header page-scroll">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <!-- copy into bootstrap -->
                    <span class="bar1"></span>
                    <span class="bar2"></span>
                    <span class="bar3"></span>
                    <span class="bar4"></span>
                    <!-- end of code for bootstrap -->
                </button>
            <h1 class="navbar-brand-spacing">
                <a class="navbar-brand navbar-brand page-scroll" href="" title=""></a>
            </h1>
        </div>
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav navbar-right">
                    <li><a href=""></a></li>
                    <li><a href=""></a></li>
                    <li><a href=""></a></li>
                    <li><a href=""></a></li>
                </ul>
        </div>
    </div>

CSS:

.navbar-brand {
    text-transform: none;
    margin: 0px;
    min-width: 214px;
    text-indent: -9999px;
    height: 70px;
    background: url(../images/logo-telbox.png) no-repeat;
}
.navbar-brand-scroll {
    background: url(../images/logo-telbox-scroll.png) no-repeat;
}

JS:

$(window).scroll(function () {
    var e = $(this).scrollTop();
    e > 60 ? $("header").css("background", "#16181F").css("padding", "0px 0px 10px") : $("header").css("background", "transparent").css("padding", "20px 0px 20px");
});

Thanks :)

All right? First of all I want to thank the help. Well, my question is as follows:

I would like to to scroll the mouse and create a background and decrease the space from the top, also change the logo. The question of the top bottom and then I could do as code below. However, I do not know what to do to change the logo.

HTML:

<div class="col-md-12">
        <div class="navbar-header page-scroll">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <!-- copy into bootstrap -->
                    <span class="bar1"></span>
                    <span class="bar2"></span>
                    <span class="bar3"></span>
                    <span class="bar4"></span>
                    <!-- end of code for bootstrap -->
                </button>
            <h1 class="navbar-brand-spacing">
                <a class="navbar-brand navbar-brand page-scroll" href="" title=""></a>
            </h1>
        </div>
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav navbar-right">
                    <li><a href=""></a></li>
                    <li><a href=""></a></li>
                    <li><a href=""></a></li>
                    <li><a href=""></a></li>
                </ul>
        </div>
    </div>

CSS:

.navbar-brand {
    text-transform: none;
    margin: 0px;
    min-width: 214px;
    text-indent: -9999px;
    height: 70px;
    background: url(../images/logo-telbox.png) no-repeat;
}
.navbar-brand-scroll {
    background: url(../images/logo-telbox-scroll.png) no-repeat;
}

JS:

$(window).scroll(function () {
    var e = $(this).scrollTop();
    e > 60 ? $("header").css("background", "#16181F").css("padding", "0px 0px 10px") : $("header").css("background", "transparent").css("padding", "20px 0px 20px");
});

Thanks :)

• javascript
• jquery
• scroll
• menu

• All you need to do is to add/remove a class that would override the background: url(). – lshettyl Commented Mar 26, 2015 at 18:49

1 Answer 1

So, first off, you have the same class added twice here - <a class="navbar-brand navbar-brand page-scroll" href="" title=""></a>

You may do the following to toggle a class based on the scrollTop

.navbar-brand {
    text-transform: none;
    margin: 0px;
    min-width: 214px;
    text-indent: -9999px;
    height: 70px;
    background: url(../images/logo-telbox.png) no-repeat;
}
.navbar-brand.navbar-brand-scroll {
    background: url(../images/logo-telbox-scroll.png) no-repeat;
}

var $header = $("header");
var $logo = $("h1.navbar-brand-spacing > a");
$(window).scroll(function () {
    var e = $(this).scrollTop();
    if (e > 60) {
        $header.css("background", "#16181F").css("padding", "0px 0px 10px");
        $logo.addClass('navbar-brand-scroll');
    } else {
        $header.css("background", "transparent").css("padding", "20px 0px 20px");
        $logo.removeClass('navbar-brand-scroll');
    }
});

P.S. Scroll triggers for every pixel scrolled and way too much scripts on scroll may choke your browser. Use it sparingly!