1

I've got a site menu that works pretty much like this: http://jsfiddle.net/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 commands 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">
bradmagnus
  • 117
  • 2
  • 3
  • 10

2 Answers2

5

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.com/attr/

Mister Epic
  • 16,295
  • 13
  • 76
  • 147
  • Thank you! I'll look into attr some more. – bradmagnus Oct 17 '13 at 16:54
  • I will mark it right now. Along the same lines, is it possible to make the images crossfade quickly so that it's not as much of a jump? – bradmagnus Oct 17 '13 at 20:53
  • It's possible, yes, but will require a bit more effort. You would need to stack the images on to of each other, and when you want to trigger the transition you would fade one in and fade the other out. You should make the transition very fast, as the user could trigger the next transition before the current transition ends by scrolling quickly up and down the page. – Mister Epic Oct 18 '13 at 11:03
0

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

Paraíso
  • 384
  • 2
  • 8
  • Thanks for the suggestion. I'm using Foundation 4, and I wasn't able to figure out how to use a background image. I'm a big fan of Foundation, but sometimes things are unnecessarily complex... Hard coding the image in makes the most sense for me this time. – bradmagnus Oct 17 '13 at 16:53