Help with Mobile Sticky Header

Highlighted
Excursionist
17 0 2

I have created div ids and classes for the logo section and header icons section on my mobile store website. I have created functions to activate a sticky header on scroll but there seems to be a bad shift or transition when scrolling down, which is bad user experience. How do I fix this bad shift? One note to add, once user scrolls, the logo is hidden and user should only see the header icons when scrolling. Once user is back to the top, the logo reappears.

LOGO SECTION:

div id="logomobileheader" class="tt-mobile-header"

 

HEADER ICONS (Shop, account, favs, search, cart): 

div id="myHeaderMobile" class="container-fluid tt-top-line"

 

SEE CSS STYLES HERE:

.tt-mobile-header {background: #1e73be; z-index: 9999;}
.sticky {position: fixed; top: 0; width: 100%;}
#myHeaderMobile.sticky #logomobileheader {display:none!important}

 

SEE JAVASCRIPT HERE:

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");
  }
}
0 Likes
Highlighted
Excursionist
32 4 9

Hey @madia, the code is useful but a preview link would be much more helpful for anyone with technical knowledge to help you debug this. From what I can see, you're missing a semicolon after 

display:none!important

, and I'd put a space between display: and none as well. If this doesn't solve your issue, provide a preview link and someone may be able to take a look. 

0 Likes
Highlighted
Excursionist
17 0 2
See store @ experiencecbd.com
0 Likes
Highlighted
Excursionist
32 4 9

@madia ah yep, I see what you mean. I believe the issue here is that because you're changing the header from relative to fixed, the page jumps up a bit, having lost the height of that element at the top of the page. You can do a number of things to resolve this, like adding padding to the top of the body when you make the header sticky, or setting a min height container around your header that retains that height. In essence, I believe your issue is just the shift of this height out of the document flow, and the resolution is to retain some kind of space there when the header moves out.

1 Like
Highlighted
Excursionist
17 0 2

Thanks for clarification. I have used multiple scenarios to add some top padding to the page content to prevent sudden quick movement but it is still not working. What am I doing wrong here?

.sticky + #tt-pageContent {padding-top:60px;}
.sticky + .show_unavailable_variants {padding-top:60px;}
.sticky + #tt-pageContent.show_unavailable_variants {padding-top:60px;}
.sticky .show_unavailable_variants {padding-top:60px;}

 

0 Likes
Highlighted

@madia 

To fix the seemingly "rough" transition you'll need to use CSS' sticky position, not fixed as you are currently doing. Additionally you probably don't want to hide the logo.

Personally I always use StickyFill. There may be other open source alternatives out there but this one is my favorite.

If you're not used to developing code yourself I reckon you may want to get the assistance of a Shopify developer to get this implemented for you.

Kind regards,
Diego

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Needing urgent help? I'm available for hire, same day response guaranteed: diego.boarutto.fortes@gmail.com
◦ My app free for limited time: Add a navigation styled like Instagram Stories to your website!
1 Like