Hide LOGO div on scroll (sticky header)

Solved
Highlighted
Excursionist
17 0 2

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.

<style>
.tt-mobile-header {
  background: #1e73be;
  z-index: 9999;
}
.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}
</style>
<script>
window.onscroll = function() {myFunction()};

var header = document.getElementById("myHeaderMobile");
var sticky = header.offsetTop;

function myFunction() {
  if (window.pageYOffset > sticky) {
    header.classList.add("sticky");
  } else {
    header.classList.remove("sticky");
  }
};

$(window).scroll( function() {
    if( $(this).scrollTop() > 0 ) {
        $("#logomobileheader").hide();
    }
    else {
        $("#logomobileheader").show();
    }
});
</script>
1 Like
Highlighted

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

Team, Oakleaf Infoway

Skype: live:.cid.2ca82125d1edaa5f
Email ID: info@oakleafinfoway.com
Website: www.okaleafinfoway.com
0 Likes
Highlighted

Here it is

 

 

<style>
.tt-mobile-header {
  background: #1e73be;
  z-index: 9999;
}
.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}
@media (max-width: 720px) {.sticky {position:relative!important}}
</style>
<script>
window.onscroll = function() {myFunction()};

var header = document.getElementById("myHeaderMobile");
var sticky = header.offsetTop;

function myFunction() {
  if (window.pageYOffset > sticky) {
    header.classList.add("sticky");
  } else {
    header.classList.remove("sticky");
  }
};

$(window).scroll( function() {
    if( $(this).scrollTop() > 0 ) {
        $("#logomobileheader").hide();
    }
    else {
        $("#logomobileheader").show();
    }
});
</script>

 

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

⚡️ [Shopify Themes]: Lightning-fast, Highly converting, SEO-optimized, Minimal.
⚡️ Need help with your store? [Get a quote]
0 Likes
Highlighted
Excursionist
17 0 2

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

0 Likes
Highlighted

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

Try it

⚡️ [Shopify Themes]: Lightning-fast, Highly converting, SEO-optimized, Minimal.
⚡️ Need help with your store? [Get a quote]
0 Likes
Highlighted
Excursionist
17 0 2

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

0 Likes
Highlighted

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

⚡️ [Shopify Themes]: Lightning-fast, Highly converting, SEO-optimized, Minimal.
⚡️ Need help with your store? [Get a quote]
0 Likes
Highlighted
Excursionist
17 0 2

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?

0 Likes
Highlighted

This is an accepted solution.

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.

 

<style>
.tt-mobile-header {
  background: #1e73be;
  z-index: 9999;
}
.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}
#myHeaderMobile.sticky #logomobileheader {display:none!important}
</style>
<script>
window.onscroll = function() {myFunction()};
var header = document.getElementById("myHeaderMobile");
var sticky = header.offsetTop;

function myFunction() {
  if (window.pageYOffset > sticky) {
    header.classList.add("sticky");
  } else {
    header.classList.remove("sticky");
  }
}
</script>

 

 

⚡️ [Shopify Themes]: Lightning-fast, Highly converting, SEO-optimized, Minimal.
⚡️ Need help with your store? [Get a quote]
0 Likes
Highlighted
Excursionist
17 0 2

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?

0 Likes