Change logo on scroll with fixed header 7.1

Site URL: http://gabrielasilveira.squarespace.com

Hi there,

I'm trying to change the logo on my website when scrolling down, I've tried all css/javascript codes I could find around with no joy. If anyone has a workaround for that on 7.1 that would be much appreciated, password for the website is hello

Thank you!

@rwp thank you SO MUCH, it finally worked! 

@GabrielaS Happy to help

On 6/24/2020 at 6:30 PM, rwp said:

jQuery 3.5.1 (you will need to add in the jQuery script as well, its available from https://code.jquery.com/ I use minified.

Upload the image that you want to use as the top image to the header in Squarespace

Supply the url for top image and scroll image (its important that this matches the one you uploaded)

The code will set the image class to "logo", it does this by using your alt tag, which is the only identifier Squarespace gave that img tag.

After scrolling more than 100px, it will replace the image, change the value from 50 if you want it more or less.

var topIMG = "";
var sclIMG = "";

$('img[alt="Gabriela Silveira"]').attr("class", "logo")

$(window).scroll(function() {
   var value = $(this).scrollTop();
   if (value > 50)
      $(".logo").attr("src", sclIMG);
   else
      $(".logo").attr("src", topIMG);
});

 

Hey there, are you able to share the full code needed? I added in the jQuery 3.5.1 script but was confused where to add images and format the above.

On 7/3/2020 at 1:37 AM, yeshidesigns said:

Hey there, are you able to share the full code needed? I added in the jQuery 3.5.1 script but was confused where to add images and format the above.

Have you solved it yet?

On 7/2/2020 at 7:37 PM, yeshidesigns said:

Hey there, are you able to share the full code needed? I added in the jQuery 3.5.1 script but was confused where to add images and format the above.

I would also like to know this!

Please link to your pages so I can check what needs to be done.

3 hours ago, rwp said:

Please link to your pages so I can check what needs to be done.

thanks @rwp! in progress site is here: https://endive-swordfish-kjf7.squarespace.com

password: temppassword2020

I'd just like to transition the current logo featured in the header to another png that incorporates the company name upon scrolling

hey again @rwp! You kindly directed me here from the other forum. Any further help really would be so appreciated! I must admit there's a bit of guess work going on here from my end but this is where I'm at with it... I've copied the code from above and added in links to the images I uploaded via the 'manage custom files' section in Custom CSS. I've also added in all the code from jQuery 3.x and then pasted everything into the code injection for the Header section (not sure if this is the best location for it?). Do you know where I'm going wrong..?  My site and password is above and the code is below:

<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>

<script>
  var topIMG = "https://static1.squarespace.com/static/5ede1a2e999dc0531d6f9ebf/t/5ee8e35dfcadf46aef884a77/1592320861718/Eleven_circle_solo.png";
var sclIMG = "https://static1.squarespace.com/static/5ede1a2e999dc0531d6f9ebf/t/5ee8d2ecb1f80f408deb0b1e/1592316654032/Eleven_lockup_white02.png";

$('img[alt="Eleven"]').attr("class", "logo")

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

On 7/9/2020 at 7:48 PM, samasplen said:

hey again @rwp! You kindly directed me here from the other forum. Any further help really would be so appreciated! I must admit there's a bit of guess work going on here from my end but this is where I'm at with it... I've copied the code from above and added in links to the images I uploaded via the 'manage custom files' section in Custom CSS. I've also added in all the code from jQuery 3.x and then pasted everything into the code injection for the Header section (not sure if this is the best location for it?). Do you know where I'm going wrong..?  My site and password is above and the code is below:

 

<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>

<script>
  var topIMG = "https://static1.squarespace.com/static/5ede1a2e999dc0531d6f9ebf/t/5ee8e35dfcadf46aef884a77/1592320861718/Eleven_circle_solo.png";
var sclIMG = "https://static1.squarespace.com/static/5ede1a2e999dc0531d6f9ebf/t/5ee8d2ecb1f80f408deb0b1e/1592316654032/Eleven_lockup_white02.png";

$('img[alt="Eleven"]').attr("class", "logo")

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

have you solved it yet?

Password doesnt work.

@rwp @tuanphan Hi there! I was wondering if you could help me with the code for my site as well. Thank you!

site : https://chipmunk-clementine-pb8z.squarespace.com/

password: letstalk

You will need to follow the instructions for adding jquery.

You will also need to put in the URL for the other image.

var topIMG = $(".Header-branding-logo").attr("src");
var sclIMG = "";

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

@rwp THANK YOU! This worked perfectly.

One last question - is it possible to have a transition between the two logos (rather than just changing).

It is possible, but not with the code you are using now. I will have to look into it.

Trying to figure out this same issue @rwp -- Followed all of the steps, isntalled JQ in the header injection, uploaded the two logos, inserted them into your above code in the header injection, and no dice! Appreciate your help.

Website: https://copper-mustard-c87b.squarespace.com/

PW: HBA2020

17 hours ago, jambamoose said:

Trying to figure out this same issue @rwp -- Followed all of the steps, isntalled JQ in the header injection, uploaded the two logos, inserted them into your above code in the header injection, and no dice! Appreciate your help.

Website: https://copper-mustard-c87b.squarespace.com/

PW: HBA2020

I think above code not for 7.1. 7.1 use different logo class name. Do you still need help on this?

@tuanphan Yes, please! I'm trying to change it to a different logo on the header when scrolling in 7.1.

@tuanphan Just checking in on this in case this got buried..

@jambamoose give this a shot

var topIMG = $(".header-title-logo img").attr("src");
var sclIMG = "";

$(window).scroll(function() {
   var value = $(this).scrollTop();
   if (value > 50)
      $(".header-title-logo img").attr("src", sclIMG);
   else
      $(".header-title-logo img").attr("src", topIMG);
});

On 9/22/2020 at 1:27 PM, rwp said:

@jambamoose give this a shot

var topIMG = $(".header-title-logo img").attr("src");
var sclIMG = "";

$(window).scroll(function() {
   var value = $(this).scrollTop();
   if (value > 50)
      $(".header-title-logo img").attr("src", sclIMG);
   else
      $(".header-title-logo img").attr("src", topIMG);
});

 

@rwp I inserted that into my header code, and then inserted the URLs for the two image uploads in the spots you have marked in quotes, but it doesn't seem to be working. Guessing I'm doing something wrong...Feel free to check my code.

On 10/2/2020 at 2:06 AM, jambamoose said:

@rwp I inserted that into my header code, and then inserted the URLs for the two image uploads in the spots you have marked in quotes, but it doesn't seem to be working. Guessing I'm doing something wrong...Feel free to check my code.

wrap above code in script tag, It should be

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
  rwp code
</script>

@tuanphan Thanks for the reply...Here's my code, still having some trouble..

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
  
var topIMG = $(".header-title-logo img").attr("src");
var sclIMG = "https://static1.squarespace.com/static/5f2adc20b7290058dd53441e/t/5f5e7c1988ce6e3f57804e53/1600027673615/HBA-Logo-Website.png";

$(window).scroll(function() {
   var value = $(https://static1.squarespace.com/static/5f2adc20b7290058dd53441e/t/5f5e7c1988ce6e3f57804e53/1600027673615/HBA-Logo-Website.png).scrollTop();
   if (value > 50)
      $("https://static1.squarespace.com/static/5f2adc20b7290058dd53441e/t/5f5e7c1988ce6e3f57804e53/1600027673615/HBA-Logo-Website.png").attr("src", sclIMG);
   else
      $(".header-title-logo img").attr("src", topIMG);
});
  
  
</script>

Hello,

Looking to continue this transition above but also change the cart & burger menu images.

Any advice?

var logoTopIMG = "insert photo file";
var logoSclIMG = "insert photo file";

var burgTopIMG = "insert photo file";
var burgSclIMG = "insert photo file"; 

var cartTopIMG = "insert photo file";
var cartSclIMG = "insert photo file"; 

$(window).scroll(function() {
   var value = $(this).scrollTop();
   if (value > 800)
      $(".header-title-logo img").attr("src", logoSclIMG);
      $(".burger-box").css("background-image").attr("src", burgSclIMG); 

      $(".cart").css("background-image").attr("src", burgSclIMG); 

/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\Obviously incorrect, any pointers???

   else
      $(".header-title-logo img").attr("src", logoTopIMG);

etc...

});</script>