Solved

Hide LOGO div on scroll (sticky header)

madia
Excursionist
17 0 3

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>
Accepted Solution (1)
OpenThinking
Shopify Partner
321 81 120

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>

 

 

️ Get our [Shopify Themes]: Lightning-fast, eye-catching, highly converting, SEO-optimised, Minimal.
Struggling with CODE? You need a Shopify expert to help you with your theme! [Get a free quote]

View solution in original post

Replies 9 (9)

Oakleafinfoway
Shopify Partner
313 6 19

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*
- Was my reply helpful? Please *Like* and *Accept* Solution.
- Want to customize and improve your store? Hire us.
- Feel free to contact us on Skype: live:.cid.2ca82125d1edaa5f/
Email ID: info@oakleafinfoway.com

OpenThinking
Shopify Partner
321 81 120

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

️ Get our [Shopify Themes]: Lightning-fast, eye-catching, highly converting, SEO-optimised, Minimal.
Struggling with CODE? You need a Shopify expert to help you with your theme! [Get a free quote]
madia
Excursionist
17 0 3

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

OpenThinking
Shopify Partner
321 81 120

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

Try it

️ Get our [Shopify Themes]: Lightning-fast, eye-catching, highly converting, SEO-optimised, Minimal.
Struggling with CODE? You need a Shopify expert to help you with your theme! [Get a free quote]
madia
Excursionist
17 0 3

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

OpenThinking
Shopify Partner
321 81 120

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

️ Get our [Shopify Themes]: Lightning-fast, eye-catching, highly converting, SEO-optimised, Minimal.
Struggling with CODE? You need a Shopify expert to help you with your theme! [Get a free quote]
madia
Excursionist
17 0 3

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?

OpenThinking
Shopify Partner
321 81 120

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>

 

 

️ Get our [Shopify Themes]: Lightning-fast, eye-catching, highly converting, SEO-optimised, Minimal.
Struggling with CODE? You need a Shopify expert to help you with your theme! [Get a free quote]
madia
Excursionist
17 0 3

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?