Change logo in header while scrolling and on the other pages than the homepage

[Bodyguard55]

Hi there

Can someone help me with the code on my website? I would like to have a diffrent logo while scroling and on the other pages? 

The website is www.bodyguard-shop.ch

the links for the images are: 

1. while scrolling: https://cdn.shopify.com/s/files/1/0787/1230/8041/files/transparent_e3492f3d-e3e8-4d2a-9cd2-118dbc830...

2. on homepage: https://cdn.shopify.com/s/files/1/0787/1230/8041/files/Logo_Bodyguard-shop.ch_weiss_mit_gruenem_1.pn...

tanks a lot in advance

[Leysam]

@Bodyguard55 
Heres a quick example of the code. I have not tested this, but this will give you an idea of how to do it.

<img class="logo-main">
<img class="logo-secondary">

<script>
let logoChanged = false;
function changeLogo(shouldChange){
  const mainLogo = document.querySelector('.logo-main');
  const secondaryLogo = document.querySelector('.logo-secondary');
  if (shouldChange) {
      mainLogo.style.display = 'none';
      secondaryLogo.style.display = 'block';
  } else {
      mainLogo.style.display = 'block';
      secondaryLogo.style.display = 'none';
  }
}
document.addEventListener("scroll", (event) => {
  let shouldChange = logoChanged;
  const lastKnownScrollPosition = window.scrollY;
  if (lastKnownScrollPosition > 30) shouldChange = true;
  else shouldChange = false;
  
  // make sure to only run the function when the value of logoChanged is different than the previous value
  if (shouldChange !== logoChanged) changeLogo(shouldChange);
});
</script>​

[ThePrimeWeb]

Hey @Bodyguard55,

You can paste this into the Custom CSS in the Theme Customizer's settings

.header__heading-logo-wrapper img {
    display: none !important;
}

.section-header .header__heading-logo-wrapper:before {
    content: "";
    display: block;
    width: 150px;
    height: 35px;
    margin-top: 10px;
    background: url('https://cdn.shopify.com/s/files/1/0787/1230/8041/files/Logo_Bodyguard-shop.ch_weiss_mit_gruenem_1.png?v=1703237041') no-repeat;
    background-size: 100% 100%;
    position: relative;
    z-index: 99;
}

.section-header.scrolled-past-header .header__heading-logo-wrapper:before {
    content: "";
    margin-top: 0px;
    width: 150px;
    height: 50px;
    background: url('https://cdn.shopify.com/s/files/1/0787/1230/8041/files/transparent_e3492f3d-e3e8-4d2a-9cd2-118dbc830515.png?v=1705573981') no-repeat;
    background-size: 100% 100%;
    position: relative;
    z-index: 99;
}