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

Change logo on scroll with fixed header 7.1


GabrielaS

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

 

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

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 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);
});

 

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

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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

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
  • 0
On 7/22/2021 at 10:43 AM, scottneufeld said:

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> 

Can you share link to your site?

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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