I've got a site menu that works pretty much like this: / (found that here on stackoverflow)

My question is that the designer wants the logo in the nav (home button), to be switch to a smaller icon. Not just scale down, but actually change image. Can I use the scroll event I'm already using for the other addClass mands to change the img src?

$(window).scroll(function () {
    if ($(document).scrollTop() == 0) {
        $('#header').removeClass('tiny');
        $('#menu-spacing').addClass('nav-margin-top');
    } else {
        $('#header').addClass('tiny');
        $('#menu-spacing').removeClass('nav-margin-top')
    }
}); 


HTML
<div id="header" class="header fixed">    
    <div class="contain-to-grid">
            <nav class="row top-bar">
                <ul class="title-area">
                    <li><img src="img/resolute_logo.png" width="195" height="103" alt=""/>    </li>
    <li class="toggle-topbar menu-icon"><a href="#"><span></span></a></li>
                </ul>
                <div id="menu-spacing" class="hide-for-medium-down nav-margin-top">

I've got a site menu that works pretty much like this: http://jsfiddle/sinky/XYGRW/ (found that here on stackoverflow)

My question is that the designer wants the logo in the nav (home button), to be switch to a smaller icon. Not just scale down, but actually change image. Can I use the scroll event I'm already using for the other addClass mands to change the img src?

$(window).scroll(function () {
    if ($(document).scrollTop() == 0) {
        $('#header').removeClass('tiny');
        $('#menu-spacing').addClass('nav-margin-top');
    } else {
        $('#header').addClass('tiny');
        $('#menu-spacing').removeClass('nav-margin-top')
    }
}); 


HTML
<div id="header" class="header fixed">    
    <div class="contain-to-grid">
            <nav class="row top-bar">
                <ul class="title-area">
                    <li><img src="img/resolute_logo.png" width="195" height="103" alt=""/>    </li>
    <li class="toggle-topbar menu-icon"><a href="#"><span></span></a></li>
                </ul>
                <div id="menu-spacing" class="hide-for-medium-down nav-margin-top">

• javascript
• jquery
• html
• css

2 Answers 2

Sure:

$(window).scroll(function () {
    if ($(document).scrollTop() == 0) {
        $('#header').removeClass('tiny');
        $('#menu-spacing').addClass('nav-margin-top');
        $('.title-area img').attr('src', 'img/resolute_logo.png');
    } else {
        $('#header').addClass('tiny');
        $('#menu-spacing').removeClass('nav-margin-top');
        $('.title-area img').attr('src', 'your-new-image.png');
    }
}); 

ref: http://api.jquery./attr/

Why not just add the images to your css?

.header.tiny {
    height:40px;
    background: url(...);
}

The rest of the code you already have

On jsfiddle