CODEWITHSUNDEEP
jquery
LolliPopPingu
LolliPopPingu

Reputation: 37

Change logo on hover and scroll with jQuery

i have a question about changing logo image with jQuery.

I have this code to change the image with hover:

jQuery(function($){

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

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

And i have another code to change image when user scroll:

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])
    });

When the user scrolls, the et-fixed-header class is added to the header (it's a feature of the theme).

The problem is that the first code is applied even when the user scrolls, and therefore when he has the et-fixed-header class. Instead I want that when the user scrolli is applied only the second code and "ignored" the first one, what can I do?

Thank you

Upvotes: 1

Views: 92

Answers (2)

Romi Halasz
Romi Halasz

Reputation: 2009

If you want the mouseover event to be handled after the user scrolls, you can unbind the handler when handing the scroll event:

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

Hope this helps.

Upvotes: 0

technophyle
technophyle

Reputation: 9128

I suppose your logo is inside your header?

If that's the case, use a selector that applies only to the logo inside the header without et-fixed-header class.

For example, instead of this:

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

you can use something like this:

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

As I did above, it's a good idea to use a class instead of an id for the logo.

Upvotes: 1

Related Questions