How can I replace a logo on scroll when I've already used to CSS to replace it on one page?

Site URL: https://shearercottage-1.squarespace.com/

So, I've been trying to to get the logo to change from one logo variation to another on scroll on the homepage. Right now, it works on the other pages except for home. The difference is that the home page has a different logo than the other pages, but on scroll, they would all have the same logo. 

I have used Jquery found from another forum to get the other pages to work, and have tried using the same Jquery to try the homepage as well, but haven't had any luck. 

This is the code I used that gets the other pages to work:

<script>
var topIMG = "https://static1.squarespace.com/static/6009b38c438ecf2f5971cfe8/t/605e6b251052d72d04eadcfb/1616801403523/?format=1500w";
var sclIMG = "https://static1.squarespace.com/static/6009b38c438ecf2f5971cfe8/t/605e944d4f9237430af6b78b/1616811085957/Logo+withoutMarkDate_White.png";

$('img[alt="The Inn at Shearer Cottage"]').attr("class", "logo")

$(window).scroll(function() {
   var value = $(this).scrollTop();
   if (value > 600)
      $(".Header-branding-logo").attr("src", sclIMG);
   else
      $(".Header-branding-logo").attr("src", topIMG);
}); </script>

And this is the code I was trying to use to change the home page separately:

<script>
var topIMG = "https://static1.squarespace.com/static/6009b38c438ecf2f5971cfe8/t/605e6e3371dbfd67c7f4a118/1616801331734/Logo+withoutMark_White.png";
var sclIMG = "https://static1.squarespace.com/static/6009b38c438ecf2f5971cfe8/t/605e944d4f9237430af6b78b/1616811085957/Logo+withoutMarkDate_White.png";

$('img[alt="The Inn at Shearer Cottage"]').attr("class", "logo")

$(window).scroll(function() {
   var value = $(this).scrollTop();
   if (value > 600)
      $("#collection-60148abdb0ecb012781bb384 .Header-branding-logo").attr("src", sclIMG);
   else
      $("#collection-60148abdb0ecb012781bb384 .Header-branding-logo").attr("src", topIMG);
}); </script>

I tried calling out the home ID to really differentiate, but no luck.

If anyone has any solutions or ideas here, I would greatly appreciate it!

Website password: mydearfriends

On 3/29/2021 at 8:38 PM, patfoley said:

Site URL: https://shearercottage-1.squarespace.com/

So, I've been trying to to get the logo to change from one logo variation to another on scroll on the homepage. Right now, it works on the other pages except for home. The difference is that the home page has a different logo than the other pages, but on scroll, they would all have the same logo. 

I have used Jquery found from another forum to get the other pages to work, and have tried using the same Jquery to try the homepage as well, but haven't had any luck. 

This is the code I used that gets the other pages to work:

<script>
var topIMG = "https://static1.squarespace.com/static/6009b38c438ecf2f5971cfe8/t/605e6b251052d72d04eadcfb/1616801403523/?format=1500w";
var sclIMG = "https://static1.squarespace.com/static/6009b38c438ecf2f5971cfe8/t/605e944d4f9237430af6b78b/1616811085957/Logo+withoutMarkDate_White.png";

$('img[alt="The Inn at Shearer Cottage"]').attr("class", "logo")

$(window).scroll(function() {
   var value = $(this).scrollTop();
   if (value > 600)
      $(".Header-branding-logo").attr("src", sclIMG);
   else
      $(".Header-branding-logo").attr("src", topIMG);
}); </script>

 

And this is the code I was trying to use to change the home page separately:

<script>
var topIMG = "https://static1.squarespace.com/static/6009b38c438ecf2f5971cfe8/t/605e6e3371dbfd67c7f4a118/1616801331734/Logo+withoutMark_White.png";
var sclIMG = "https://static1.squarespace.com/static/6009b38c438ecf2f5971cfe8/t/605e944d4f9237430af6b78b/1616811085957/Logo+withoutMarkDate_White.png";

$('img[alt="The Inn at Shearer Cottage"]').attr("class", "logo")

$(window).scroll(function() {
   var value = $(this).scrollTop();
   if (value > 600)
      $("#collection-60148abdb0ecb012781bb384 .Header-branding-logo").attr("src", sclIMG);
   else
      $("#collection-60148abdb0ecb012781bb384 .Header-branding-logo").attr("src", topIMG);
}); </script>

 

I tried calling out the home ID to really differentiate, but no luck.

If anyone has any solutions or ideas here, I would greatly appreciate it!

Website password: mydearfriends

You can target the homepage header and other page header like so

For other pages

:not(.homepage) .Header-branding-logo

For Homepage

.homepage .Header-branding-logo