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

Link to comment
  • Replies 1
  • Views 386
  • Created
  • Last Reply
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

 

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.