i want my logo to change from white to black on scroll header - brooklyn theme

[7kingodmsla]

i currently have a transparent header and sticker header installed on my brooklyn theme its just my logo is only black , i want to be able to change the logo colors on scroll any solutions ?

[Zworthkey]

@7kingodmsla 
you have so much queries,
Kindly hire a developer.

Thank you

[7kingodmsla]

these questions have to be asked . others are asking as well

[JohnFromJotting]

Hi @7kingodmsla,

So you need to understand javascript here.

2 Things, you add 2 pictures for the logo upload, one for the black and other white. Then you use javascript to interchange between the 2.

[7kingodmsla]

Hey John ,  i have both uploaded already , actually have everything squared away besides being able to interchange between the two

[JohnFromJotting]

Hi @7kingodmsla now you need to do the magic of frontend using javascript. I don't know what brooklyn does, but I assume when it scrolls the transparent header goes away. Use this trigger to interchange between the 2 logos - one is shown other is hidden. 

[7kingodmsla]

if you have a link to verified solution this would be great. 

[JohnFromJotting]

Hi @7kingodmsla,

There's no "link" per say, you need to understand how javascript works/how to develop using javascript. Unfortunately this request would be too unique for someone to have a solution done out there. You'll need to educate yourself or as someone suggested above, hire someone.

[SHIBdev]

try using something similar to this,

// Javascript
// jQuery to collapse the navbar on scroll
const $window = $(window);

$window.on('scroll', function() {
  let scroll = $window.scrollTop();
  if (scroll > 20) {
    $(".fixed-top").addClass("top-nav-collapse");
    //$("img.logo-image").attr('src', "images/master_logo_black.svg");
  } else {
    $(".fixed-top").removeClass("top-nav-collapse");
    //$("img.logo-image").attr('src', "images/master_logo_gold.svg")
  }
});

[PaulNewton]

This depends on theme and current code but can often be handled with a CSS rule that works with a custom class some sticky headers apply to the body tag as the site scrolls.

Find that class on the body tag then search for CSS solutions to invert colors to synthesize a non-javascript solution