2

The WordPress theme I'm using adds two logos, a dark one when the site loads, and a lighter one when the sticky nav is activated upon scroll. When the sticky nav is active the class 'scrolled' is added to the containing div, 'scroll_header_top_area'.

The code below works if I've already scrolled down the page and the sticky nav is active and I refresh the page, but it doesn't switch out the logos dynamically when scrolling.

I've seen the suggestions to use MutationObserver but I'm afraid I can't understand the example or how to use it here.

How would I change this code to make the change dynamic based upon whether the 'scrolled' class is active. 

if  ( $j('.scroll_header_top_area').hasClass('scrolled'))  {

    $j(".q_logo img").attr("src","path_to_image/light.png");
}

else {
    $j(".q_logo img").attr("src","path_to_image/dark.png");
}
lloyd
  • 1,089
  • 1
  • 17
  • 39
maikunari
  • 109
  • 1
  • 10

1 Answers1

3

It sounds like you need an event handler. This will handle a scrolling event.

$j(".q_logo img").attr("src","path_to_img/dark.png");   

$( window ).scroll(function() {

    if( $j('.scroll_header_top_area').hasClass('scrolled'))
    {
        $j(".q_logo img").attr("src","path_to_image/light.png");
    }
    else{
        $j(".q_logo img").attr("src","path_to_image/dark.png");
    }
});
lloyd
  • 1,089
  • 1
  • 17
  • 39
  • The only problem is that it doesn't load the first image (dark) on page load, it works for both on scroll. – maikunari Jul 14 '17 at 19:39
  • Actually, if I add this before your code it all works great : $j(".q_logo img").attr("src","path_to_img/dark.png"); – maikunari Jul 14 '17 at 19:40