How can I hide the mobile logo div on scroll smoothly?

Store Design
1

hello I am having an issue that I cannot seem to resolve. Please see store on mobile: http://experiencecbd.com/

I am trying to hide the logo div id “logomobileheader” on scroll, but it does not seem to work. Also the fixed header transition on scroll is not smooth at all. Please help. I used this below to style fixed header.
1 Like
2

Hello

Welcome to the Shopify Community!

This is Jay from Oakleaf Infoway. I’d be happy to assist you and get out it of you from your current issue

If you wish to move forward with us.

Please add me over the skype/Mail for an instant communication

Email ID: jay@oakleafinfoway.net

3

Here it is

If this helps you out, please accept my answer and give me a thumbs up! Cheers

4

This is the same thing I wrote? the only different is the position but it needs to be fixed

5

No, it is not. There’s also the code you need to make it work as you want.

Try it

6

The sticky header doesn’t display at all when I copied in your code

7

Ok,

so you want to hide only the #logomobileheader but leave the menu part with the icons!?

Why are you using that JavaScript?

I don’t understand what you’re trying to achieve here

8

Yes! while scrolling on mobile, you should only see the menu icons. The only time you should the logo displayed is at the top. That is why I wondering if there was something wrong I did in the script code? If you inspect our website via mobile view, you will see I have applied div ids and function indicators yet the logo section is still not hidden on scroll.

I am using Javascript to hide when scrolled. What other way is there?

9

You can do it this way then:

#myHeaderMobile.sticky #logomobileheader {display:none!important}

If it is #myHeaderMobile and it is .sticky do not display #logomobileheader (Code above explained)

Try and let me know if it works.

Here’s your code modified.
10

It has worked! Now, is there anyway to transition the scroll? The scroll is not smooth at all when the sticky header is activated. Logo fades out on scroll then fades back in with back to the top?