Jump to content

Change logo on scroll with fixed header 7.1

Go to solution Solved by rwp,

Recommended Posts

  • Solution

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);
});

 

Link to comment
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.

Link to comment

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>

Link to comment
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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 weeks later...

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);
});

 

Link to comment
  • 1 month later...
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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 weeks later...
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.

Link to comment
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>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 weeks later...

@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>

Link to comment
  • 9 months later...

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> 

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.