Измените lo go при наведении и прокрутите с помощью jQuery

Question

У меня есть вопрос об изменении изображения lo go на jQuery.

У меня есть этот код для изменения изображения при наведении курсора:

jQuery(function($){

    $('#logo').attr("src", "/logo01.png");

$('#main-header').mouseover(function () {
        $('#logo').attr("src", "/logo01.png");
    })
        .mouseout(function () {
        $('#logo').attr("src", "/logo02.png");
    });
});

И у меня есть другой код для изменения изображения при прокрутке пользователем:

var imageUrl = ['/logo03.png', '/logo01.png',];

    jQuery(window).on('scroll', function() {
        var $header = jQuery('header');
        var $logo = jQuery('#logo');

        if ($header.hasClass('et-fixed-header')) {
            return $logo.attr('src', imageUrl[0]);
        };
        return $logo.attr('src', imageUrl[1])
    });

Когда пользователь прокручивает, в заголовок добавляется класс et-fixed-header (это особенность темы).

Проблема в том, что первый код применяется, даже когда пользователь прокручивает, и, следовательно, когда у него есть класс et-fixed-header. Вместо этого я хочу, чтобы, когда пользователь scrolli применял только второй код и «игнорировал» первый, что я могу сделать?

Спасибо

Answer 1

Полагаю, ваш lo go находится внутри вашего заголовка?

В этом случае используйте селектор, который применяется только к lo go внутри заголовка без et-fixed-header class.

Например, вместо этого:

$('#logo').attr("src", "/logo01.png");

вы можете использовать что-то вроде этого:

$('header:not(".et-fixed-header") .logo-image').attr("src", "/logo01.png");

Как я сделал выше, это хорошая идея использовать класс вместо идентификатора для lo go.

Answer 2

Если вы хотите, чтобы событие mouseover обрабатывалось после прокрутки пользователя, вы можете отвязать обработчик при обработке события прокрутки:

jQuery(window).on('scroll', function() {
    $('#main-header').unbind('mouseover');
    // ...

Надеюсь, это поможет.