Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 1

Change logo on scroll with fixed header 7.1


GabrielaS
Go to solution Solved by rwp,

Question

  • Answers 23
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

@rwp thank you SO MUCH, it finally worked! 

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 = ""; $(

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>  

23 answers to this question

Recommended Posts

  • 1

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

 

Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Link to post
  • 0

@GabrielaS Happy to help

Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Link to post
  • 0
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 post
  • 0
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?

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

Link to post
  • 0
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!

Link to post
  • 0

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

Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Link to post
  • 0

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 post
  • 0
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?

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

Link to post
  • 0

Password doesnt work.

Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Link to post
  • 0

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

 

Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Link to post
  • 0

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

Edited by rwp

Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Link to post
  • 0
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?

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

Link to post
  • 0

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

 

Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Link to post
  • 0
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 post
  • 0
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>

 

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

Link to post
  • 0

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

Create an account or sign in to comment

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


×
×
  • Create New...