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>&lt;ul&gt; &lt;li&gt; &lt;/li&gt; &lt;/ul&gt;</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.