Make logo disappear smoothly when scrolling

Store Design
1

Hey, how can I make the logo disappear smoothly when scrolling?

URL: https://www.bafaluc.com

Password: sawbaw

2

Hi @Pam9 ,

I checked and your site is showing side header. So can you explain more about logo disappear.

Because with side header, it will always show on the left side when scrolling.

3
Show More

On mobile. Forgot to mentioned it.

4

Hi @Pam9 ,

Go to Assets > theme.css and paste this at the bottom of the file:

@media screen and (max-width: 948px){
	.template-index .sidebar{
		position: relative !important;
	}
	.template-index #content-holder{
		position: absolute;
		width: 100%;
		top: 0;
	}
}

Hope it helps!

5

Hey @LitCommerce ,

I would like only the logo to disappear, not the rest (search, cart and menu).

6

Hi @Pam9 ,

If you want to do this, you need to add JS to check active sticky header for mobile. You can refer to the code:

https://www.w3schools.com/howto/howto_js_sticky_header.asp

After you add it successfully, I will help you to add CSS to make the logo disappear smoothly.

Hope it helps!

7

Hey @LitCommerce ,

The header on mobile is already sticky.

8

Hi @Pam9 ,

Sticky with CSS it’s different from sticky add class with JS, because you need to add event to check scroll and disappear smoothly logo.

So I just recommend adding JS according to the instructions, before taking the next step.

Or simply, please follow the steps:

  • Step 1: Go to assets > theme.js.liquid file and paste this at the bottom of the file:
class HideLogo {
  constructor() {
    if (window.outerWidth < 949) {
      window.addEventListener('scroll', this.onScroll.bind(this), false);
    }
  }
  
  onScroll() {
    const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
    const divLogo = document.querySelector('.logo__image');
    const logo = divLogo.querySelector('img');
    scrollTop > 100 ? logo.classList.add('is-show') : logo.classList.remove('is-show');
  }
}

new HideLogo();
  • Step 2: Go to Assets > theme.css and paste this at the bottom of the file:
@media screen and (max-width: 948px){
  .logo img{
	opacity: 1;
    transition: opacity 0.5s linear;
  }
  .logo img.is-show{
	opacity: 0;
  }
}

Hope it helps!

9

Hey @LitCommerce ,

It works! Thank you so much!