Jump to content

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

Recommended Posts

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

Edited by patfoley
Link to comment
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

 

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.