Jump to content

hidden header logo that appears when scrolling

Recommended Posts

Site URL: https://bat-primrose-64j6.squarespace.com/config/

Hi,

I wonder if anyone can help with a bit of code?

I want the header logo to be invisible when you land on the page and only appear once you scroll down the page.

There's a large hero logo on the first page so I don't want two logos on the screen at the same time. I've set the header to be fixed so that's sorted, it's just getting the code so the logo is invisible and then appears.

Thanks in advance

Jordan

Link to comment
  • 6 months later...
  • 2 weeks later...
On 3/13/2021 at 2:39 AM, CritiquesOverCoffee said:

Hey @tuanphan,
Thanks so much - this worked great for me too!
Is it possible to do this so the logo fades/slides in gradually?

Hi. Can you share link to your site? WE can check easier

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 years later...
On 4/19/2023 at 2:06 PM, daviesbrand said:

@tuanphan Thanks for the above – super helpful. Would you be able to help me get the logo to appear after a certain point on the page? I'd like it to appear once off the first section.

harp-oriole-9bt6.squarespace.com
pw: hoddlestreet

Thanks!

You mean logo will disappear when users scroll to section 2?

 

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

Try adding to Last Line in Code Injection > Footer

<script>
  $(window).scroll(function(){
  var scroll = $(window).scrollTop();
  if(scroll > 900){
    $('header#header').addClass('scrollNav');
  }
  else{
    $('header#header').removeClass('scrollNav');
  }
});
</script>
<style>
  header#header img {
    opacity: 0;
    transition: all 0.3s;
}
.scrollNav img {
    opacity: 1 !important;
    transition: all 0.3s;
}
</style>

 

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
  • 4 months later...
On 9/19/2023 at 6:23 PM, Barbi said:

I implemented it on desktop and it worked but it didn't work on  mobile. It doesn't dissapear on the first section and then appear again like on desktop

Change this CSS

.homepage .header-title-logo {
    opacity: 0;
    position: relative;
    top: -10vh;
    transition: all .75s;
}

to this

.homepage .header-title-logo, .homepage .header-mobile-logo a {
    opacity: 0;
    position: relative;
    top: -10vh;
    transition: all .75s;
}

and change this

.homepage .shrink .header-title-logo {
    opacity: 1;
    position: relative;
    top: 0;
}

to this

.homepage .shrink .header-title-logo, .homepage .shrink .header-mobile-logo a {
    opacity: 1;
    position: relative;
    top: 0;
}

 

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
  • 3 months later...

This is a very helpful code snippet however, is there a solution for non-fixed position headers? I find SS's fixed header function, whether on basic or scroll back, also adds a small jump before reaching the top of the site page, not sure why that happens. 

Cheers! 
N

Link to comment

When scrolling, SS adds a new class so we can target the state before scrolling and while scrolling

If you disable fixed header, SS does not add this class, you will need to use JavaScript to add scroll class.

You can share link to your site, we can check & adjust code easier

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

thanks @tuanphan 

Link to site: https://point-cyan-jzwc.squarespace.com/

pw: snc2024

I would prefer the logo in header to disappear very quickly before user scrolls back at the halfway point of the hero image – as I plan to add a large logo here. The navi links can remain.

I would only need this for the homepage and desktop/ipad screens only. The navi bar is also currently set to white, if you can adapt to make it transparent, that would be great as the links are white as well. 

Feel free to give me a shout if you need to know anything else – thank you in advance! 

N

Link to comment
On 1/10/2024 at 3:15 AM, tuanphan said:

When scrolling, SS adds a new class so we can target the state before scrolling and while scrolling

If you disable fixed header, SS does not add this class, you will need to use JavaScript to add scroll class.

You can share link to your site, we can check & adjust code easier

Hi @tuanphan Sorry to chase, did you figure this out? Much appreciated 🙂

Link to comment

Add to Last Line in Code Injection > Footer

<script>
  $(function(){
 var visibleTop = 50;
  $(window).scroll(function() {
    var scroll = getCurrentScroll();
      if ( scroll >= visibleTop ) {
           $('body').addClass('hide-logo');
        }
        else {
            $('body').removeClass('hide-logo');
        }
  });
function getCurrentScroll() {
    return window.pageYOffset || document.documentElement.scrollTop;
    }
});
</script>
<style>
  body.hide-logo header#header img {
    visibility: hidden;
}
</style>

 

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
On 1/14/2024 at 3:47 AM, tuanphan said:

Add to Last Line in Code Injection > Footer

<script>
  $(function(){
 var visibleTop = 50;
  $(window).scroll(function() {
    var scroll = getCurrentScroll();
      if ( scroll >= visibleTop ) {
           $('body').addClass('hide-logo');
        }
        else {
            $('body').removeClass('hide-logo');
        }
  });
function getCurrentScroll() {
    return window.pageYOffset || document.documentElement.scrollTop;
    }
});
</script>
<style>
  body.hide-logo header#header img {
    visibility: hidden;
}
</style>

 

Hi @tuanphan thanks for this! The code works, but is there anyway to make the logo in the header invisible when the user reaches the first section of the homepage on scroll back (with logo artwork)? see attached reference. The code you've provided hides the logo on scroll back on other sections but need this needs to be visible on every other section apart from the first. If it helps, this is a good reference: https://giancarlovalle.com/ 

Let me know if it's feasible, and thanks again!

N

Screenshot 2024-01-15 at 09.43.16.png

Link to comment
On 1/15/2024 at 9:50 AM, noblestudio said:

Hi @tuanphan thanks for this! The code works, but is there anyway to make the logo in the header invisible when the user reaches the first section of the homepage on scroll back (with logo artwork)? see attached reference. The code you've provided hides the logo on scroll back on other sections but need this needs to be visible on every other section apart from the first. If it helps, this is a good reference: https://giancarlovalle.com/ 

Let me know if it's feasible, and thanks again!

N

Screenshot 2024-01-15 at 09.43.16.png

Hi @tuanphan not sure if you managed to work this out? Would be great to get an update, thank you! 🙂 

Link to comment
On 1/15/2024 at 4:50 PM, noblestudio said:

Hi @tuanphan thanks for this! The code works, but is there anyway to make the logo in the header invisible when the user reaches the first section of the homepage on scroll back (with logo artwork)? see attached reference. The code you've provided hides the logo on scroll back on other sections but need this needs to be visible on every other section apart from the first. If it helps, this is a good reference: https://giancarlovalle.com/ 

Let me know if it's feasible, and thanks again!

N

Screenshot 2024-01-15 at 09.43.16.png

You mean

Make logo invisible on first section

and make it visible on other sections on current page?

 

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

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.