JS/jQuery изображение подкачки на событии прокрутки

У меня есть меню сайта, которое работает примерно так: http://jsfiddle.net/sinky/XYGRW/ (найдено, что здесь, в stackoverflow)

Мой вопрос заключается в том, что дизайнеру нужен логотип на nav (домашняя кнопка), чтобы переключиться на меньшую иконку. Не только уменьшите масштаб, но и измените изображение. Могу ли я использовать событие прокрутки, которое я уже использую для других команд addClass для изменения 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"><code> 
 </code><div><code>
 </code><nav><code>
 <ul>
 <li> </li>
 
 </ul>
 </code><div id="menu-spacing"> </div></nav></div></div>
2 ответа

Конечно:

$(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/


Почему бы просто не добавить изображения в ваш css?

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

Остальная часть кода, который у вас уже есть

На jsfiddle

licensed under cc by-sa 3.0 with attribution.