0

I have a site built on selfhosted Wordpress (Divi). It changes the top menu logo on scroll. I need the logo to change when the site shows the fixed header instead the primary top menu. I use this JQuery script:

<script>
    
jQuery(window).scroll(function () {
    if (jQuery(window).scrollTop() > 50) {
        jQuery('#logo').attr('src','link_to_fixed_header_logo')
    } else {
         jQuery('#logo').attr('src','link_to_primary_top_menu_logo')
    }
});

</script>

It works fine on the home page, the logo changes when the fixed header appears (and changes background color for the logo). However, there is one bug on all other pages. The fixed header shows a little bit lower, and because of that, the logo changes first, and then the background changes. How can I fix it?

I think it can probably be done in two ways, either two versions of script can be made or one can make fixed header show at the same point on all the pages.

staty1k
  • 11
  • 1

1 Answers1

0

Change the if (jQuery(window).scrollTop() > 50 50 to a higher parameter that matches to your changing backgroundcolor?

Some more information of your navigationbar and how u change the color would be helpful.

Gandi87
  • 106
  • 7
  • The problem is that you need to scroll lower on some pages in order for the fixed header to appear. 50 points works great on the home page. The white fixed header appears and the logo changes to black simultaneously. However on all the other pages you need to scroll lower to get the fixed header (I'd say around 60 points). Because of that, the logo changes earlier than background, and it looks sloppy. – staty1k Feb 03 '21 at 23:21